jQuery实现淡入淡出轮播图带左右按钮及下方小圆点
2017新年，我的第一个工作日，对于jQuery掌握不成熟的我写了一个轮播图，鼓励我在新的一年加油工作，掌握新的知识。
轮播图有自动播放功能，左右按钮切换图片，还有下方小圆点也可点击切换图片。
代码写的不够成熟，请各位看官指出不足，共同进步(*^__^*)。
html代码
1 <body> 2 <div class="carousel"> 3 <!--左侧按钮--> 4 <button class="left"><<</button> 5 <ul id="carousel"> 6 <li id="item1"> 7 <img src="img/img1.jpg" /> 8 </li> 9 <li id="item2"> 10 <img src="img/img2.jpg" /> 11 </li> 12 <li id="item3"> 13 <img src="img/img3.jpg" /> 14 </li> 15 </ul> 16 <!--下方小圆点--> 17 <div class="dot"><span class="active"></span><span></span><span></span></div> 18 <!--右侧按钮--> 19 <button class="right">>></button> 20 </div> 21 </body>
jQuery代码，记得引入js库，
1 <script> 2 3 $(function(){ 4 var items = $('#carousel').children(); 5 var len = items.length; 6 var index = 0; 7 var str = 0; 8 var dots = $('.dot').children(); 9 /*var dotsChild = $('.dot span');*/ 10 11 //自动播放函数autoPlay() 12 13 function autoPlay(){ 14 $(items[index]).fadeIn(1000); 15 16 function play(){ 17 $(dots).removeClass("active"); 18 if(index >=0 & index < len-1){ 19 $(items[index]).fadeOut(1500); 20 index++; 21 $(items[index]).fadeIn(1500); 22 $(dots[index]).addClass("active"); 23 }else{ 24 $(items[index]).fadeOut(1500); 25 index=0; 26 $(items[index]).fadeIn(1500); 27 $(dots[index]).addClass("active"); 28 }; 29 str = index; 30 } 31 32 setInterval(play,7000); 33 34 } 35 autoPlay(); 36 37 //点击左侧按钮的函数 38 $(".left").click(function(){ 39 $(dots).removeClass("active"); 40 if(str == 0){ 41 $(items[str]).fadeOut(1500); 42 str = len-1; 43 $(items[str]).fadeIn(1500); 44 $(dots[str]).addClass("active"); 45 index = str; 46 47 }else{ 48 $(items[str]).fadeOut(1500); 49 str --; 50 $(items[str]).fadeIn(1500); 51 $(dots[str]).addClass("active"); 52 index = str; 53 } 54 }); 55 //点击右侧按钮的函数 56 $(".right").click(function(){ 57 $(dots).removeClass("active"); 58 if(str == len-1){ 59 $(items[str]).fadeOut(1500); 60 str = 0; 61 $(items[str]).fadeIn(1500); 62 $(dots[str]).addClass("active"); 63 index = str; 64 }else{ 65 $(items[str]).fadeOut(1500); 66 str ++; 67 $(items[str]).fadeIn(1500); 68 $(dots[str]).addClass("active"); 69 index = str; 70 } 71 }) 72 //小圆点 73 $(".dot span").click(function(){ 74 var num = $(this).index(); 75 $(dots).removeClass("active"); 76 $(dots[num]).addClass("active"); 77 $(items).fadeOut(1500); 78 $(items[num]).fadeIn(1500); 79 index = num; 80 }) 81 }); 82 </script>
css代码：
1 .carousel{ 2 width: 800px; 3 margin: auto; 4 position: relative; 5 } 6 7 .carousel ul{ 8 margin: 0; 9 padding: 0; 10 position: relative; 11 width: 800px; 12 height: 500px; 13 14 } 15 .carousel ul li{ 16 list-style: none; 17 float: left; 18 position: absolute; 19 top: 0; 20 left: 0; 21 display: none; 22 } 23 #item1{ 24 z-index: 3; 25 } 26 #item2{ 27 z-index: 2; 28 } 29 #item3{ 30 z-index: 1; 31 } 32 /*向左向右的按钮*/ 33 .left,.right{ 34 position: absolute; 35 top: 200px; 36 z-index: 10; 37 width: 30px; 38 height: 30px; 39 border: none; 40 background: #000; 41 color: #fff; 42 text-align: center; 43 padding: 0; 44 opacity: 0.1; 45 cursor: pointer; 46 } 47 .left{ 48 left: 0; 49 } 50 .right{ 51 right: 0; 52 } 53 .left:hover,.right:hover{ 54 opacity:1; 55 } 56 /*圆点*/ 57 .dot{ 58 width: 800px; 59 bottom: 0; 60 height: 30px; 61 position: absolute; 62 text-align: center; 63 z-index: 10; 64 } 65 .dot span{ 66 display: inline-block; 67 width: 12px; 68 height: 12px; 69 border-radius: 50px; 70 background: #fff; 71 margin: 0 15px 0 0 ; 72 cursor: pointer; 73 } 74 .dot .active{ 75 background: #f00 !important; 76 }
