最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（再次表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。
效果如下：
?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="./img/1.jpg" width="400px" height="200px" alt="1"></a></li> 51 ????????<li><a href="#"><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li> 52 ????????<li><a href="#"><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li> 53 ????????<li><a href="#"><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li> 54 ????????<li><a href="#"><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li> 55 ????</ul> 56 ????<img src="./img/prev.png" width="40px" height="40px" id="prev"> 57 ????<img src="./img/next.png" width="40px" height="40px" id="next"> 58 </div> 59 </div> 60 <script type="text/javascript" src="./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>使用JS实现图片轮播（前后首尾相接）
原文地址：http://www.cnblogs.com/iMichael-Zhang/p/7564995.html