js实现淡入淡出轮播切换功能

2019-11-19 17:57:59

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>   *{    margin:0;    padding:0;   }   /*最小宽度 这样图片就可以自适应居中*/   .warp{    min-width:900px;    width:100%;    height: 600px;    margin:0 auto;   }   #banner{    position: relative;   }   ul{    position: relative;    width:100%;    height:600px;    overflow: hidden;   }   ul li{    display: none;    position: absolute;    top:0;    left: 0;    width: 100%;    height: 600px;    text-align: center;   }   .cur{    position:absolute;    bottom:20px;    text-align: center;    width: 100%;    height: 40px;    line-height: 40px;   }   .cur span{    display: inline-block;    width: 20px;    height: 20px;    background:#000;   }   .cur span.active{    background:blue;   }   .btn{    position: absolute;    top:50%;    width: 50px;    height: 100px;    line-height: 100px;    text-align: center;    margin-top:-50px;    color:#fff;    font-size:18px;    background: rgba(0,0,0,0.9)   }   .btnLeft{    left:0;   }   .btnRight{    right:0;   }   img{    width: 900px;    height: 600px;   } </style></head><body><div class="warp"> <div class="lunbo" id="banner">  <ul>   <li style="background:red;display: block">全屏渐变 图片自适应居中</li>   <li style="background:green">全屏渐变 图片自适应居中</li>   <li style="background:yellow">全屏渐变 图片自适应居中</li>  </ul>   <!-- 如果两个按钮在图片的外面 只需要把按钮移到外面然后在js里添加按钮移入清除定时器事件 -->  <div class="btn btnLeft"><</div>  <div class="btn btnRight">></div> </div></div><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><script>  var num=0;  var btnLeft=$(".btnLeft");  var btnRight=$(".btnRight");  var Id=$("#banner");  var oUl=Id.find("ul");  var oLi=oUl.find("li");  var oLiLen=oLi.length;  var curHtml="<div class='cur'></div>";   Id.append(curHtml);  var oCur=$(".cur");  // 动态添加小圆点  for(var i=0;i<oLiLen;i++){    var curA="<span></span>"    oCur.append(curA);  }  var oCurSpan=oCur.find("span");  var oCurS=oCur.find("span:first");  oCurS.addClass('active')  // 自动轮播  var t=setInterval(function(){    num++;    lunbo();  },3000);  // 移动到轮播清除定时器  Id.hover(function(){    clearInterval(t)  },function(){    t=setInterval(function(){      num++;      lunbo();    },3000);  });  // 左箭头按钮  btnLeft.on("click",function(){    num--;    lunbo();  })     //右箭头按钮   btnRight.on("click",function(){    num++;    lunbo();  })  function lunbo(){    if(num==oLiLen){      num=0;    }    oLi.eq(num).fadeIn().siblings().fadeOut();    oCurSpan.eq(num).addClass('active').siblings().removeClass('active');  }  lunbo();</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：jQuery实现的简单排序功能示例【冒泡排序】

下一篇：js仿百度音乐全选操作