最近各種跑面試，終于還是被問到這個，一腦子漿糊，當時沒想出來首尾相接怎么搞，回來之后研究了一波，終于搞出來了，不多說，直接看代碼
代碼參考了一位已經寫好了圖片輪播功能的（再次表示感謝），但是沒有首尾相接的功能，本人在此基礎上增加了首尾相接功能。
效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片輪播</title> <style type="text/css"> body,div,ul,li,a,img{margin: 0;padding: 0;} ul,li{list-style: none;} a{text-decoration: none;} #wrapper{ position: relative; margin: 30px auto; /* 上下邊距30px，水平居中 */ width: 400px; height: 200px; } #banner{ position:relative; width: 400px; height: 200px; overflow: hidden; } .imgList{ position:relative; width:2000px; height:200px; z-index: 10; overflow: hidden; } .imgList li{float:left;display: inline;} #prev, #next{ position: absolute; top:80px; z-index: 20; cursor: pointer; opacity: 0.2; filter:alpha(opacity=20); } #prev{left: 10px;} #next{right: 10px;} #prev:hover, #next:hover{opacity: 0.5;filter:alpha(opacity=50);}</style></head><body> <div id="wrapper"><!-- 最外層部分 --> <div id="banner"><!-- 輪播部分 --> <ul class="imgList"><!-- 圖片部分 --> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li> </ul> <img src="./img/prev.png" width="40px" height="40px" id="prev"> <img src="./img/next.png" width="40px" height="40px" id="next"></div></div><script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script><script type="text/javascript">var curIndex = 0, //當前index imgLen = $(".imgList li").length; //圖片總數$(".imgList").css("width", (imgLen+1)*400+"px");// 定時器自動變換3秒每次var autoChange = setInterval(function(){ if(curIndex < imgLen-1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex);},3000);//左箭頭滑入滑出事件處理$("#prev").hover(function(){ //滑入清除定時器 clearInterval(autoChange);}, function(){ //滑出則重置定時器 autoChangeAgain();});//左箭頭點擊處理$("#prev").click(function(){ //根據curIndex進行上一個圖片處理 // curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1); if (curIndex == 0) { var element = document.createElement("li"); element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML; // $(".imgList li")[imgLen - 1].remove(); $(".imgList").prepend(element); $(".imgList").css("left", -1*400+"px"); changeTo(curIndex); curIndex = -1; } else if (curIndex == -1) { $(".imgList").css("left", -(imgLen-1)*400+"px"); curIndex = imgLen-2; $(".imgList li")[0].remove(); changeTo(curIndex); } else { --curIndex; changeTo(curIndex); }});//右箭頭滑入滑出事件處理$("#next").hover(function(){ //滑入清除定時器 clearInterval(autoChange);}, function(){ //滑出則重置定時器 autoChangeAgain();});//右箭頭點擊處理$("#next").click(function(){ // curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0; console.log(imgLen); if (curIndex == imgLen-1) { var element = document.createElement("li"); element.innerHTML = $(".imgList li")[0].innerHTML; // $(".imgList li")[0].remove(); $(".imgList").append(element); ++curIndex; } else if (curIndex == imgLen) { curIndex = 0; $(".imgList").css("left", "0px"); $(".imgList li")[imgLen].remove(); curIndex++; } else { ++curIndex; } changeTo(curIndex);});//清除定時器時候的重置定時器--封裝function autoChangeAgain(){ autoChange = setInterval(function(){ if(curIndex < imgLen-1){ curIndex ++; }else{ curIndex = 0; } //調用變換處理函數 changeTo(curIndex); },3000);}function changeTo(num){ var goLeft = num * 400; $(".imgList").animate({left: "-" + goLeft + "px"},500);}</script></body></html>以上這篇使用JS實現圖片輪播的實例(前后首尾相接)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
