jQuery做的轮播图，淡入淡出效果，没有使用面向对象
效果图：思路图： *{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; } img{ position:absolute; width:400px; height:300px; } #imgId1{ opacity:1; } #imgId2{ opacity:0; } #imgId3{ opacity:0; } #imgId4{ opacity:0; } #imgId5{ opacity:0; } ul{ position:absolute; right:20px; bottom:10px; height:40px; } li{ float:left; margin-left:10px; width:20px; height:20px; border-radius:50%; background-color:orange; } #leftArrow{ position: absolute; left:0px; top:50%; } #rightArrow{ position: absolute; right:0px; top:50%; } ＜ ＞ var arr=["timg1.jpg","timg2.jpg","timg3.jpg","timg4.jpg","timg5.jpg"];var ord = 0;//代表当前图片的序号，从0开始。var myTimer = null; function initUI() { $("#box li:first").css({"backgroundColor":"red"});} function initEvent() { $("#box").mouseenter(function () { stopPlay(); }); $("#box").mouseleave(function () { autoPlay(); }); $("#box li").click(function () { goImg($("#box li").index(this)); }); $("#leftArrow").click(function () { let transord =ord-1; transord = transordarr.length-1?0:transord; goImg(transord); });} //1、自动播放function autoPlay() { myTimer = setInterval(function () { //一、改变数据 // 1、记录当前序号（淡出的图片序号） let outOrd = ord; //2、改变要显示的图片的序号（淡出图片序号加一） ord++; if(ord>arr.length-1){ ord=0; } //二、改变外观 let $img = $("#box img"); //1、淡入淡出效果 //让一张(outOrd)淡出 当前消失 $img.eq(outOrd).animate({"opacity":0},2000); //让一张(ord)淡入下一张图片显示 $img.eq(ord).animate({"opacity":1},2000); //2、改变豆豆的颜色； $("#box li").eq(ord).css({"backgroundColor":"red"}).siblings().css({"backgroundColor":"orange"}); },3000);} //2、停止播放function stopPlay() { window.clearInterval(myTimer);} //3、跳转到指定的图片function goImg(transOrd) { //一、改变数据 // 1、记录当前序号（淡出的图片序号） let outOrd = ord; //2、改变要显示的图片的序号（传入的图片序号） ord=transOrd; if(ord>arr.length-1){ ord=0; } //二、改变外观 let $img = $("#box img"); //1、淡入淡出效果 //让一张(outOrd)淡出 当前消失 $img.eq(outOrd).animate({"opacity":0},2000); //让一张(ord)淡入下一张图片显示 $img.eq(ord).animate({"opacity":1},2000); //2、改变豆豆的颜色； $("#box li").eq(ord).css({"backgroundColor":"red"}).siblings().css({"backgroundColor":"orange"});} $(function () { //1、初始化界面 initUI(); //2、绑定事件 initEvent(); //3、自动播放 autoPlay();});jQuery
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至lizi9903@foxmail.com举报，一经查实，本站将立刻删除。