最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码代码参考了一位已经写好了图片轮播功能的（再次表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。效果如下： 1 <!DOC ...
最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（再次表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。
效果如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片轮播</title> 6 <style type="text/css"> 7 body,div,ul,li,a,img{margin: 0;padding: 0;} 8 ul,li{list-style: none;} 9 a{text-decoration: none;} 10 #wrapper{ 11 position: relative; 12 margin: 30px auto; /* 上下边距30px，水平居中 */ 13 width: 400px; 14 height: 200px; 15 } 16 #banner{ 17 position:relative; 18 width: 400px; 19 height: 200px; 20 overflow: hidden; 21 } 22 .imgList{ 23 position:relative; 24 width:2000px; 25 height:200px; 26 z-index: 10; 27 overflow: hidden; 28 } 29 .imgList li{float:left;display: inline;} 30 #prev, 31 #next{ 32 position: absolute; 33 top:80px; 34 z-index: 20; 35 cursor: pointer; 36 opacity: 0.2; 37 filter:alpha(opacity=20); 38 } 39 #prev{left: 10px;} 40 #next{right: 10px;} 41 #prev:hover, 42 #next:hover{opacity: 0.5;filter:alpha(opacity=50);} 43 44 </style> 45 </head> 46 <body> 47 <div id="wrapper"><!-- 最外层部分 --> 48 <div id="banner"><!-- 轮播部分 --> 49 <ul class="imgList"><!-- 图片部分 --> 50 <li><a href="#"><img src='/images/loading.gif' data-original="./img/1.jpg" width="400px" height="200px" ></a></li> 51 <li><a href="#"><img src='/images/loading.gif' data-original="./img/2.jpg" width="400px" height="200px" ></a></li> 52 <li><a href="#"><img src='/images/loading.gif' data-original="./img/3.jpg" width="400px" height="200px" ></a></li> 53 <li><a href="#"><img src='/images/loading.gif' data-original="./img/4.jpg" width="400px" height="200px" ></a></li> 54 <li><a href="#"><img src='/images/loading.gif' data-original="./img/5.jpg" width="400px" height="200px" ></a></li> 55 </ul> 56 <img src='/images/loading.gif' data-original="./img/prev.png" width="40px" height="40px" id="prev"> 57 <img src='/images/loading.gif' data-original="./img/next.png" width="40px" height="40px" id="next"> 58 </div> 59 </div> 60 <script type="text/javascript" src='/images/loading.gif' data-original="./js/jquery-3.2.1.min.js"></script> 61 <script type="text/javascript"> 62 var curIndex = 0, //当前index 63 imgLen = $(".imgList li").length; //图片总数 64 $(".imgList").css("width", (imgLen+1)*400+"px"); 65 // 定时器自动变换3秒每次 66 var autoChange = setInterval(function(){ 67 if(curIndex < imgLen-1){ 68 curIndex ++; 69 }else{ 70 curIndex = 0; 71 } 72 //调用变换处理函数 73 changeTo(curIndex); 74 },3000); 75 76 //左箭头滑入滑出事件处理 77 $("#prev").hover(function(){ 78 //滑入清除定时器 79 clearInterval(autoChange); 80 }, function(){ 81 //滑出则重置定时器 82 autoChangeAgain(); 83 }); 84 85 //左箭头点击处理 86 $("#prev").click(function(){ 87 //根据curIndex进行上一个图片处理 88 // curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1); 89 if (curIndex == 0) { 90 var element = document.createElement("li"); 91 element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML; 92 // $(".imgList li")[imgLen - 1].remove(); 93 $(".imgList").prepend(element); 94 $(".imgList").css("left", -1*400+"px"); 95 changeTo(curIndex); 96 curIndex = -1; 97 } else if (curIndex == -1) { 98 $(".imgList").css("left", -(imgLen-1)*400+"px"); 99 curIndex = imgLen-2;100 $(".imgList li")[0].remove();101 changeTo(curIndex);102 } else {103 --curIndex;104 changeTo(curIndex);105 }106 107 });108 109 //右箭头滑入滑出事件处理110 $("#next").hover(function(){111 //滑入清除定时器112 clearInterval(autoChange);113 }, function(){114 //滑出则重置定时器115 autoChangeAgain();116 });117 //右箭头点击处理118 $("#next").click(function(){119 // curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;120 console.log(imgLen);121 if (curIndex == imgLen-1) {122 var element = document.createElement("li");123 element.innerHTML = $(".imgList li")[0].innerHTML;124 // $(".imgList li")[0].remove();125 $(".imgList").append(element);126 ++curIndex;127 } else if (curIndex == imgLen) {128 curIndex = 0;129 $(".imgList").css("left", "0px");130 $(".imgList li")[imgLen].remove();131 curIndex++;132 } else {133 ++curIndex;134 }135 changeTo(curIndex);136 });137 138 //清除定时器时候的重置定时器--封装139 function autoChangeAgain(){140 autoChange = setInterval(function(){141 if(curIndex < imgLen-1){142 curIndex ++;143 }else{144 curIndex = 0;145 }146 //调用变换处理函数147 changeTo(curIndex);148 },3000);149 }150 151 152 function changeTo(num){153 var goLeft = num * 400;154 $(".imgList").animate({left: "-" + goLeft + "px"},500);155 }156 </script>157 </body>158 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：使用JS实现图片轮播（前后首尾相接）
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
