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

北战南征 提交于 2020-01-03 11:56:47
<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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!