huanggr
写过轮播的兄弟朋友们都知道，原生的写起来真叫一个爽歪歪，使用jquery就方便很多了，但是使用jquery也有很多种方法去实现，接下来博主就给大家奉上一段简洁的代码去实现完整轮播的轮播功能：
史上功能最简单最完善的轮播图（源码篇）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /*轮播图*/ .right,.left { margin-top: -20px; } #banner { width: 100%; height: 400px; margin:0 auto; border-radius: 5px; overflow:hidden; position: relative; z-index: 1; } #banner ul { width: 100%; height: 100%; } #banner ul li{ width: 100%; height: 100%; opacity:0; position: absolute; left: 0; top: 0; } #banner ul li.curr{ opacity:1; /*display:block;*/ } .icon{ position:absolute; left:0px; bottom:8px; width:100%; text-align:center; } .icon ol li{ display:inline-block; list-style:none; width:10px; height:10px; background:#000; border-radius:50%; color:#fff; text-align:center; cursor:pointer; } .icon ol li.first{ background:#fff; } .btn{ display:none; margin-top: -25px; } .btn div{ position:absolute; top:50%; width:50px; height:50px; background:rgba(0,0,0,0.2); color:#fff; text-align:center; line-height: 50px; border-radius: 50%; cursor:pointer; } .btn div.left{ left:0; } .btn div.right{ right:0; } /*轮播图*/ /* 使用图片请删除下列代码 */ li:nth-child(1){ background: pink; } li:nth-child(2){ background: #ccc; } li:nth-child(3){ background: black; } li:nth-child(4){ background: green; } li:nth-child(5){ background: yellow; } li:nth-child(6){ background: green; } /* 使用图片请删除下列代码 */ </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="banner"> <div id="banner-move"> <ul> <!-- 演示放图片不太方便，所以div上色呀 --> <!-- <li class="curr"><img src="images/1.jpg" width="100%" height="100%" alt="轮播"></li> <li><img src="images/2.jpg" width="100%" height="100%" alt="轮播"></li> <li><img src="images/3.jpg" width="100%" height="100%" alt="轮播"></li> <li><img src="images/4.jpg" width="100%" height="100%" alt="轮播"></li> <li><img src="images/5.jpg" width="100%" height="100%" alt="轮播"></li> <li><img src="images/6.jpg" width="100%" height="100%" alt="轮播"></li> --> <li class="curr"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="icon"> <ol> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <div class="btn"> <div class="left"> < </div> <div class="right"> > </div> </div> </div> </div> </body> </html> <script type="text/javascript"> /*jquery的轮播图*/ var index=0; var $icons=$(".icon ol li"); var $imgs=$("#banner ul li"); //右边按钮点击切换 $(".right").click(function(){ index++; if(index>5)index=0; play(); }); //左边按钮点击切换 $(".left").click(function(){ index--; if(index<0)index=5; play(); }); //页面联动封装 function play(){ //选择当前的index然后添加curr类，然后选择同级的元素，移出curr,下面的一句也是一样的道理 $imgs.eq(index).addClass('curr').siblings().removeClass('curr'); $icons.eq(index).addClass('first').siblings().removeClass('first'); } //移动到谁的上面，就传入谁的index值 $icons.hover(function(){ index=$(this).index(); play(); }); //鼠标移动实现页面停止效果 $("#banner").hover(function(){ $(".btn").show(); clearTimeout(timer); },function(){ $(".btn").hide(); autoplay(); }); //开启自动轮播 autoplay(); function autoplay() { timer=setInterval(function(){ index++; if(index>5)index=0; //开启播放 play(); },2000); } /*jquery的轮播图*/ </script> |
7