溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近各種跑面試，終于還是被問到這個，一腦子漿糊，當時沒想出來首尾相接怎么搞，回來之后研究了一波，終于搞出來了，不多說，直接看代碼
代碼參考了一位已經寫好了圖片輪播功能的（再次表示感謝），但是沒有首尾相接的功能，本人在此基礎上增加了首尾相接功能。
效果如下：
<!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實現圖片輪播的實例(前后首尾相接)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
