使用JS实现图片轮播（前后首尾相接）
Posted iMichael_Zhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JS实现图片轮播（前后首尾相接）相关的知识，希望对你有一定的参考价值。
最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（在此表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。
效果如下：（在线演示地址）
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 js实现效果：循环轮播图