使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)

來源：懂視網責編：小采時間：2020-11-27 22:29:12

使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)

使用JS實現(xiàn)圖片輪播的實例(前后首尾相接):最近各種跑面試，終于還是被問到這個，一腦子漿糊，當時沒想出來首尾相接怎么搞，回來之后研究了一波，終于搞出來了，不多說，直接看代碼代碼參考了一位已經寫好了圖片輪播功能的（再次表示感謝），但是沒有首尾相接的功能，本人在此基礎上增加了首尾相接功

推薦度：

點擊下載本文 文檔為doc格式

導讀使用JS實現(xiàn)圖片輪播的實例(前后首尾相接):最近各種跑面試，終于還是被問到這個，一腦子漿糊，當時沒想出來首尾相接怎么搞，回來之后研究了一波，終于搞出來了，不多說，直接看代碼代碼參考了一位已經寫好了圖片輪播功能的（再次表示感謝），但是沒有首尾相接的功能，本人在此基礎上增加了首尾相接功

最近各種跑面試，終于還是被問到這個，一腦子漿糊，當時沒想出來首尾相接怎么搞，回來之后研究了一波，終于搞出來了，不多說，直接看代碼

代碼參考了一位已經寫好了圖片輪播功能的（再次表示感謝），但是沒有首尾相接的功能，本人在此基礎上增加了首尾相接功能。

效果如下：

<!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; //圖片總數(shù)
$(".imgList").css("width", (imgLen+1)*400+"px");
// 定時器自動變換3秒每次
var autoChange = setInterval(function(){
 if(curIndex < imgLen-1){
 curIndex ++;
 }else{
 curIndex = 0;
 }
 //調用變換處理函數(shù)
 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;
 }
 //調用變換處理函數(shù)
 changeTo(curIndex);
 },3000);
}


function changeTo(num){
 var goLeft = num * 400;
 $(".imgList").animate({left: "-" + goLeft + "px"},500);
}
</script>
</body>
</html>

以上這篇使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片輪播輪播圖

熱門焦點

使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)

使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)

使用JS實現(xiàn)圖片輪播的實例(前后首尾相接)

最新推薦

猜你喜歡

熱門推薦