JQuery图片自适应窗口轮播图(淡入淡出效果)

Posted 潘多拉游乐园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery图片自适应窗口轮播图(淡入淡出效果)相关的知识,希望对你有一定的参考价值。

<script>
var w = $(window).width();//获取窗口宽度
var h = $(window).height();//获取窗口高度
$(".box").width(w);//赋值给图片外包
$(".box").height(h);
function carousel(){
var v1=$(".box .text");//消失的元素
var v2;//要显示的元素
if(v1.next().length==0){//如果循环到最后一张
v2 = $(".box img").eq(0);//v2显示为第一张
}else{
v2 = v1.next();//否则显示下一张
}
v1.animate({opacity:"0"},2000,function(){
v1.removeClass("text");//动画效果-消失
});
v2.animate({opacity:"1"},2000,function(){
v2.addClass("text");//动画效果-显示
    });
}
</script>
<html>
  <div class="box">
<img src="img/amg_three.jpg" title="car" alt="图片未加载" class="text">
<img src="img/carousel_two.jpg" title="car" alt="图片未加载">
<img src="img/amg_four.jpg" title="car" alt="图片未加载">
<img src="img/carousel_four.jpg" title="car" alt="图片未加载">
  </div>
</html>

以上是关于JQuery图片自适应窗口轮播图(淡入淡出效果)的主要内容,如果未能解决你的问题,请参考以下文章

首页大屏广告效果 jquery轮播图淡入淡出

淡入淡出轮播图怎么解决闪白的问题

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

Jquery淡入淡出轮播图

jquery 广告轮播图

轮播图(淡入淡出切换)