之前設計了一個校團委網站，里面有一個輪播圖效果，上網后查看了許多方法，覺得下面這個方法最為適用，記錄下來
js代碼：
$(document).ready(function () {//無縫切換輪播var i = 0;//索引var clone = $(".banner .imgList li").first().clone();//克隆第一張圖片$(".banner .imgList").append(clone);//復制到列表最后var size = $(".banner .imgList li").size();//記錄圖片總數/*自動輪播*/var t = setInterval(function () { i++; move();},2000);/*鼠標懸停事件*/$(".banner").hover(function () {clearInterval(t);//鼠標懸停時清除定時器 }, function () {t = setInterval(function () { i++; move(); }, 2000); //鼠標移出時清除定時器 });/*鼠標滑入原點事件*/$(".banner .indexList li").hover(function () {var index = $(this).index();//獲取當前索引值i = index;$(".banner .imgList").stop().animate({ left: -index * 1366 }, 500);$(this).addClass("onIndex").siblings().removeClass("onIndex");$(".infoList").find("li").removeClass().eq(i).addClass("onInfo");});/*向左按鈕*/$(".prev").click(function () {i--;move();})/*向右按鈕*/$(".next").click(function () {i++;move();});/*移動事件*/function move() {//情況1索引為5if (i == size) {//當索引變為5，將left變為0，此時圖片依舊未變，而之后把索引變為1，執行animate（），使得動畫效果如同從第一張切換到第二張$(".banner .imgList").css({ left: 0 });//無時間移動i = 1;}//情況2索引為-1if (i == -1) {$(".banner .imgList").css({ left: -(size - 1) * 1366 });i = size - 2;}$(".banner .imgList").stop().animate({ left: -i * 1366 }, 500);if (i == size - 1) {//當索引指向的是復制的項，把突出顯示轉移到第一張圖片$(".banner .indexList li").eq(0).addClass("onIndex").siblings().removeClass();$(".banner .infoList li").eq(0).addClass("onInfo").siblings().removeClass();} else {$(".banner .indexList li").eq(i).addClass("onIndex").siblings().removeClass();$(".banner .infoList li").eq(i).addClass("onInfo").siblings().removeClass();}} });
html代碼：
<div class="wrapper"><div class="banner"><ul class="imgList"><li><a href="#"><img src="img/2017屆粵西全體大合照.png"/></a></li><li><a href="#"><img src="img/部門素拓合照.png"/></a></li><li><a href="#"><img src="img/班級合照3.png"/></a></li><li><a href="#"><img src="img/粵西動員大會.png"/></a></li></ul><ul class="infoList"><li class="onInfo">就業工作學生協助會成功舉辦粵西專場招聘會</li><li >部門素拓合照</li><li >班級合照</li><li >粵西動員大會</li></ul><ul class="indexList"><li class="onIndex"></li><li></li><li></li><li></li></ul><div class="bg"></div><div class="instructor"><img class="prev" src="img/左箭頭.png" /><img class="next" src="img/右箭頭.png"/></div> </div></div>
?下面是原生js實現圖片輪播的功能：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style type="text/css">body,li,ul,img{margin: 0;padding:0;}ul{list-style: none;}img{width: 500px;height: 350px;}.wrapper{position: relative;top: 130px;left: 400px;width: 500px;height: 350px;overflow:hidden;}.banner{position: relative;width: 3000px;height: 350px;}.wrapper .banner .imgList{position: absolute;}.wrapper .banner .imgList li{float: left;}</style></head><body><div class="wrapper"><div class="banner"><ul class="imgList" title="2333" style="left: 0px;"><li><a href="#"><img src="img/一輪面試.jpg" /></a></li><li><a href="#"><img src="img/三輪合照.jpg" /></a></li><li><a href="#"><img src="img/二輪面試.jpg" /></a></li><li><a href="#"><img src="img/第一次會議修改.jpg" /></a></li><li><a href="#"><img src="img/粵西3.png" /></a></li></ul></div></div><script type="text/javascript">var i=0;var e=document.getElementsByClassName("imgList")[0];var list=e.getElementsByTagName("li")[0];var clone=list.cloneNode(true);//注意，appendChild是用于移動元素的，不是用來復制拷貝元素的 e.appendChild(clone);var width=list.getElementsByTagName("img")[0].width; //獲取寬度var length=e.getElementsByTagName("li").length; //獲取總長度function transMove(value){var left=parseInt(e.style.left);if(left>value){e.style.left=(left-10)+"px";var repeat="transMove("+value+")";var g=setTimeout(repeat,20);}}var t=setInterval(function(){i++;move();},2000);function move(){if(i==length){e.style.left="0px";//直接給標簽添加屬性 i=1;}if(i==-1){e.style.left='-1*(length-1)*width+"px"';i=length-2;}//e.style.setProperty("left",-1*i*width+"px"); transMove(-1*i*width);}</script></body> </html>
?
