我們在開發當中經常用到輪播。我在這里總結了一下幾種，僅供參考：
第一種：
1、jQuery：用display ：none/block控制的一種輪播；
// CSS部分 #igs { margin: 30px auto; width: 1200px; height: 460px; position: relative; } .ig { position: absolute; } #tabs { position: absolute; list-style: none; background-color: rgba(255,255,255,.5); left: 500px; bottom: 10px; border-radius: 10px; padding: 5px 0 5px 5px; } .tab{ float: left; text-align: center; line-height: 20px; width: 20px; height: 20px; cursor: pointer; overflow: hidden; margin-right: 4px; border-radius: 100%; background-color: rgb(200,100,150); } .tab.active{ background-color: red; color: #fff; } .btn{ position: absolute; top: 200px; width: 40px; color: #fff; height: 100px; background-color: rgba(255,255,255,.3); font-size: 40px; font-weight: bold; text-align: center; line-height: 100px; border-radius: 5px; margin: 0 5px; } .btn2{ position: absolute; right: 0px; } .btn:hover{ background-color: rgba(0,0,0,.7); } // HTML部分 <div id="igs"> <a class="ig" href="#">1<img src="images/slider-1.jpg"/></a> <a class="ig" href="#">2<img src="images/slider-2.jpg"/></a> <a class="ig" href="#">3<img src="images/slider-3.jpg"/></a> <a class="ig" href="#">4<img src="images/slider-4.jpg"/></a> <a class="ig" href="#">5<img src="images/slider-5.jpg"/></a> <div class="btn btn1"><</div> <div class="btn btn2">></div> <ul id="tabs"> <li class="tab active">1</li> <li class="tab">2</li> <li class="tab">3</li> <li class="tab">4</li> <li class="tab">5</li> </ul> </div> // JavaScript部分 //定義全局變量和定時器 var i = 0 ; var timer; $(function(){ //用jquery方法設置第一張圖片顯示，其余隱藏
// $("#igs a:not(:first-child)").hide()；這樣操作的話可以把a鏈接里面的class取消掉 $('.ig').eq(0).show().siblings('.ig').hide(); //調用showTime()函數（輪播函數） showTime(); //當鼠標經過下面的數字時，觸發兩個事件（鼠標懸停和鼠標離開） $('.tab').hover(function(){ //首先清除時間函數 clearInterval(timer); //獲取當前i的值，調用輪播函數 i = $(this).index(); Show(); },function(){ //鼠標離開時開啟時間函數 showTime(); }); //鼠標點擊左側的箭頭 $('.btn1').click(function(){ clearInterval(timer);
i--; if(i == 0){ //注意此時i的值 i = $('.ig').length; } Show(); showTime(); }); //鼠標點擊右側的箭頭 $('.btn2').click(function(){ clearInterval(timer);
i++; if(i == $('.ig').length - 1){ //當圖片是最后一張時，點擊右箭頭， i = -1; } Show(); showTime(); }); }); //創建一個showTime函數 function showTime(){ //設置定時器 timer = setInterval(function(){ //調用一個Show()函數 Show(); i++; //當圖片是最后一張的后面時，設置圖片為第一張 if(i == 5){ i = 0; } },2000); } //創建一個Show函數 function Show(){ //在這里可以用其他jquery的動畫 $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300); //給.tab創建一個新的Class為其添加一個新的樣式，並且要在css代碼中設置該樣式 $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active'); }
2、Javascript：用display ：none/block控制的一種輪播；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .container{ width:1130px; height:500px; margin:0 auto; position:relative; } .inner{ width:1130px; height:500px; } .inner-img{ width:1130px; height:500px; display: none; position:absolute; top:0; left:0; z-index:1; } .inner-img.active{ display: block; } .leftBtn,.rightBtn{ position:absolute; width:40px; height:60px; background:rgba(0,0,0,0.3); font-size: 30px; color:#fff; text-align: center; line-height: 60px; cursor:pointer; z-index: 11; display:none; } .leftBtn{ left:5px; top:200px; } .rightBtn{ right:5px; top:200px; } .container ul{ position:absolute; left:520px; bottom:10px; z-index: 11; list-style: none; width:100px; height:20px; } .container ul .page{ float:left; width:18px; height:18px; border-radius:18px; background: black; margin-right: 6px; color: #fff; font-size: 12px; text-align: center; line-height: 18px; cursor: pointer; } .container ul .page.active{ background-color: red; } </style> </head> <body> <div class="container"> <div class="inner"> <a href="#" class="inner-img active"><img src="images/TB1.Ez0IVXXXXcbXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a> <a href="#" class="inner-img"><img src="images/TB1dpJtJFXXXXXsXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a> <a href="#" class="inner-img"><img src="images/TB14aRbJFXXXXagXVXXXXXXXXXX-1130-500.jpg_q100.jpg" alt=""></a> <a href="#" class="inner-img"><img src="images/TB15AHZIVXXXXX7XFXXSutbFXXX.jpg_q100.jpg" alt=""></a> </div> <div class="leftBtn"><</div> <div class="rightBtn">></div> <ul> <li class="page active">1</li> <li class="page">2</li> <li class="page">3</li> <li class="page">4</li> </ul> </div> <script> var container = document.getElementsByClassName('container')[0], // 獲取所有包含圖片的鏈接 innerImg = document.getElementsByClassName('inner-img'), // 獲取左右按鈕 btnL = document.getElementsByClassName('leftBtn')[0], btnR = document.getElementsByClassName('rightBtn')[0], // 獲取分頁器 page = document.getElementsByClassName('page'), // 聲明變量 num = 0; // 聲明時間控制函數 var timer = setInterval(moveR, 1000); // 圖片向右輪播 function moveR() { // 變量每1000毫秒遞增一次,圖片向右輪播 num++; // 如果是最后一張圖片的時候從0開始顯示 if (num == innerImg.length) { num = 0; } move(); }; // 圖片向左輪播 function moveL() { // 每調用一次moveL(),變量遞減一次 num--; // 如果是第一張圖片，則從最后一張圖片開始顯示 if (num == -1) { num = innerImg.length - 1; }; move(); }
// 圖片切換
function move(){
// 把所有的innerImg隱藏和page背景全部變成黑色
for (var i = 0; i < innerImg.length; i++) {
innerImg[i].style.display = 'none';
page[i].style.background = 'black';
}
// 把當前num下標的innerImg顯示和page背景變成red
innerImg[num].style.display = 'block';
page[num].style.background = 'red';
}
// 分頁器鼠標滑過時圖片切換 for (var i = 0; i < page.length; i++) { // 用來保存下標，page[i].index == 0 / 1 / 2 / 3 page[i].index = i; // console.log(page[i].index); // 因為已經保存好的下邊，這里的page[i], page[0], page[1], page[2], page[3] page[i].onmouseover = function() { for (var j = 0; j < page.length; j++) { page[j].style.background = 'black'; innerImg[j].style.display = 'none'; } this.style.background = 'red';
// console.log(this.index);可以查看是多少 innerImg[this.index].style.display = 'block'; num = this.index; } } btnL.onclick = function() { moveR(); } btnR.onclick = function() { moveL(); } // 鼠標划上container時讓左右按鈕顯示 container.onmouseover = function() { // 清除時間函數 clearInterval(timer); btnR.style.display = 'block'; btnL.style.display = 'block'; } // 鼠標離開container時讓左右按鈕隱藏 container.onmouseout = function() { // 開啟時間函數 timer = setInterval(moveR, 3000); btnR.style.display = 'none'; btnL.style.display = 'none'; } </script> </body> </html>
第二種：
1、用jQuery實現的跑馬燈效果；
HTML：
<div class="container"> <div class="inner-img"> <div class="img"><img src="img/1.jpg" height="100%" width="100%" alt="" /></div> <div class="img"><img src="img/2.jpg" height="100%" width="100%" alt="" /></div> <div class="img"><img src="img/3.jpg" height="100%" width="100%" alt="" /></div> <div class="img"><img src="img/4.jpg" height="100%" width="100%" alt="" /></div> <div class="img"><img src="img/5.jpg" height="100%" width="100%" alt="" /></div> <div class="img"><img src="img/6.jpg" height="100%" width="100%" alt="" /></div> </div> <div class="btn-left"><</div> <div class="btn-right">></div> </div>
CSS：
.container{ width: 1000px; height: 300px; border: 1px solid #666; margin: 100px auto; position: relative; overflow: hidden; } .inner-img{ /*如果顯示是五張圖片，這里必須要等於 + 一張圖片的width*/ width: 1200px; height: 300px; background-color: #ccc; position: absolute; left: 0; top: 0; } .img{ width: 200px; height: 100%; float: left; font-size: 50px; text-align: center; line-height: 300px; padding: 20px; box-sizing: border-box; /*overflow: hidden;*/ } .btn-left,.btn-right{ width: 30px; height: 60px; color: #fff; background: #000; font-size: 30px; text-align: center; line-height: 60px; opacity: 0.5; display: none; } .btn-left{ position:absolute; left: 0px; top: 120px; } .btn-right{ position:absolute; right: 0px; top: 120px; }
JavaScript：
// 可以把整個代碼封裝成一個函數，后期可以傳參，用來控制一次可以切換幾張圖片 $(document).ready(function() { // 獲取包含圖片的盒子的寬度 var imgW = $(".img").outerWidth(); // 指定計時器 var t = setInterval(moveL, 2000); function moveL() { /* *.stop()：停止當前正在運行的動畫，表示兩個參數都是false； *.stop(true，true)：停止被選元素的所有加入隊列的動畫，但允許完成當前動畫。 */ $(".inner-img").stop(true, true); /* *1、首先將inner-img的left: 0轉換為left：-200px *2、將inner-img的第一個子元素appendTo()到inner-img里面 *3、再次設置inner-img的left：-200px; */ $(".inner-img").animate({ left: -imgW }, function() { // 講已經切換到-200px的第一張圖片appendTo到父元素里面，這也是跑馬燈效果的秘訣 $(".inner-img > .img").first().appendTo($(".inner-img")); $(".inner-img").css({ left: 0 }); }) }; // 向右的輪播 function moveR() { $(".inner-img").stop(true, true); $(".inner-img").css({ left: -imgW }); $(".inner-img > .img").last().prependTo($(".inner-img")); $(".inner-img").animate({ left: 0 }); }; // 鼠標滑上，滑下效果 $(".container").hover(function() { // 當鼠標滑過父容器時清除時間函數 clearInterval(t); // 並且將左右按鈕顯示出來 $(".btn-left").add(".btn-right").fadeIn(50); }, function() { // 當鼠標滑過父容器時開啟時間函數 t = setInterval(moveL, 2000); // 並且將左右按鈕隱藏 $(".btn-left").add(".btn-right").fadeOut(50); }); // 點擊左邊的按鈕向右切換圖片 $(".btn-left").click(function() { moveR(); }); // 點擊右邊的按鈕向左切換圖片 $(".btn-right").click(function() { moveL(); }) });
2、用JavaScript實現的跑馬燈效果；
第三種：
1、用jQuery實現的無縫輪播
HTML：
<div class="banner"> <ul class="img"> <li><a href=""><img src="img/1.jpg" alt="" /></a></li> <li><a href=""><img src="img/2.jpg" alt="" /></a></li> <li><a href=""><img src="img/3.jpg" alt="" /></a></li> <li><a href=""><img src="img/4.jpg" alt="" /></a></li> <li><a href=""><img src="img/5.jpg" alt="" /></a></li> </ul> <ul class="page"></ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div>
CSS：
* { padding: 0px; margin: 0px; list-style: none; font-family: "微軟雅黑"; } .banner { width: 740px; height: 350px; margin: 100px auto; border: 1px solid #808080; position: relative; overflow: hidden; } .banner .img { width: 5000px; position: absolute; left: 0px; top: 0px; } .banner .img li { width: 740px; height: 350px; } .banner .img li a { display: block; width: 100%; height: 100%; } .banner .img li { float: left; } .banner .page { position: absolute; width: 100%; bottom: 10px; left: 0px; text-align: center; font-size: 0px; } .banner .page li { width: 20px; height: 20px; background-color: #888; border-radius: 50%; display: inline-block; margin: 0px 3px; cursor: pointer; color: #fff; } .banner .page li.active { background-color: #ff6a00; } .banner .btn { width: 30px; height: 50px; background-color: #808080; opacity: 0.5; filter: alpha(opacity:0.5); position: absolute; top: 50%; margin-top: -25px; cursor: pointer; text-align: center; line-height: 50px; font-size: 40px; color: #fff; display: none; } .banner .btn_l { left: 0px; } .banner .btn_r { right: 0px; } .banner:hover .btn { display: block; }
JavaScript：
$(function() { //聲明當前圖片的索引值 var num = 0; //克隆第一張圖片 var clone = $('.img li').first().clone(); //獲取圖片的寬度 var imgW = $('.img li').first().width(); //將第一張圖片插入到img容器里面里面 $('.banner .img').append(clone); //獲取插入之后li的個數 var size = $('.img li').size(); //動態的根據圖片數量創建分頁器並且插入到num里面 for(var i = 0; i < size - 1; i++) { $('.page').append('<li></li>'); } //給創建的分頁器的第一個添加active的類 $('.page li').first().addClass('active'); //創建一個時間函數用來控制圖片切換的方式 var timer = setInterval(function() { num++; move(); }, 1000); //move函數 function move() { if(num == size) { //當運動到最后一張圖片時，重置整個img到left：0的位置 $('.banner .img').css({ left: 0 }); num = 1; } //點擊右邊按鈕時 if(num == -1) { $('.img').css({ left: -(size - 1) * imgW }) num = size - 2; } //隨着num的遞增，img容器以animate的方式向左移動-imgW * num的距離 $('.banner .img').stop().animate({ left: -imgW * num }, 500); //當num等於圖片數量時，選取第一個分頁器設置樣式，否則，等於當前按照num設置分頁器的樣式。 if(num == size - 1) { $('.page li').eq(0).addClass('active').siblings().removeClass('active'); } else { $('.page li').eq(num).addClass('active').siblings().removeClass('active'); } }; //點擊分頁器 $('.page li').click(function(){ //獲取到當前分頁器的下標並且賦值給當前圖片的下標 num = $(this).index(); move(); }) //點擊右按鈕時向右切換圖片 $('.btn_r').click(function() { num--; move(); }) //點擊左邊按鈕時切換圖片 $('.btn_l').click(function() { num++; move(); }) //鼠標滑過banner容器時 $('.banner').hover(function() { //首先清除時間函數 clearInterval(timer); }, function() { //鼠標離開時調用時間函數 timer = setInterval(function() { num++; move(); }, 1000) }) })
2、用js實現的無縫輪播
HTML：
<div class="win"> <a href="javascript:;"><img src="img/1.jpg" title=""></a> <a href="javascript:;"><img src="img/2.jpg" title=""></a> <a href="javascript:;"><img src="img/3.jpg" title=""></a> <a href="javascript:;"><img src="img/4.jpg" title=""></a> <a href="javascript:;"><img src="img/5.jpg" title=""></a> <div class="btn"> <div class="btnL"><</div> <div class="btnR">></div> </div> <ul class="circle"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
css：
.win{ height: 350px; width: 740px; margin: 20px auto; position: relative; overflow: hidden; } .win a{ position: absolute; top: 0; left: 0; } .btn{ width: 740px; height: 70px; font-size: 30px; line-height: 70px; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -35px; } .btn .btnL, .btn .btnR{ width: 35px; height: 70px; font-size: 30px; line-height: 70px; text-align: center; color: #fff; float: left; background: black; opacity: 0.5; filter:alpha(opacity:50); cursor: pointer; } .btn .btnL{ float: left; } .btn .btnR{ float: right; } .circle{ height: 15px; width: 90px; margin-left: 5px; float: left; position: absolute; left: 50%; margin-left: -33px; bottom: 10px; z-index: 12; } .circle li{ height: 15px; width: 15px; background: #ccc; opacity: 0.5; filter:aplha(opacity:50); border-radius: 50%; margin-left: 3px; float: left; } .circle li.active{ background: #e40077; }
JavaScript：
<script type="text/javascript"> window.onload = function(){ // 最大的容器 var win = document.getElementsByClassName('win')[0]; // 包含圖片的a鏈接 var as = win.getElementsByTagName('a'); // 分頁器 var lis = document.getElementsByClassName('circle')[0].getElementsByTagName('li'); //獲取圖片的尺寸 var widths = parseInt(as[0].clientWidth); // 左右的按鈕 var btnL = win.getElementsByClassName('btnL')[0]; var btnR = win.getElementsByClassName('btnR')[0]; //定義雙下標 var num = 0; var next = 0; // 設定開關，如果當前動畫沒有完成，則停止操作到當前動畫完成 var flag = true; // 首先初始化所有圖片的位置，但是將第一張圖片就位到left：0的位置 for (var i = 0; i < as.length; i++) { // 跳過本次循環 if (i == 0) { continue; }; as[i].style.left = widths + 'px'; }; // 設定時間函數，每隔兩秒動畫一次 var timer = setInterval(moveL, 2000); // 向左切換的函數 function moveL(){ next++; // 如果是最后一張圖片，從第一張圖片開始 if(next == as.length){ next = 0; } // 讓下一張圖片到右邊就為准備 as[next].style.left = widths + 'px'; // 將當前分頁器的樣式取消，加給下一張圖片 lis[num].className = ''; lis[next].className = 'active'; //動畫：讓當前的圖片到左邊去 animate(as[num], { left: -widths }); // //動畫：下一張圖片放到當前的位置 animate(as[next], { left: 0 }, function(){ flag = true; }) // 更新下標 num = next; } // 想左切換的函數 function moveR(){ next--; // 如果是第一張圖片，從最后一張圖片開始。 if(next == -1){ next = as.length - 1; } // 讓下一張圖片到左邊定位邊就為准備 as[next].style.left = -widths + 'px'; lis[num].className = ''; lis[next].className = 'active'; // 動畫：讓當前的圖片到右邊去 animate(as[num], { left: widths }) // 動畫：讓下一張圖片到當前的位置 animate(as[next], { left: 0 }, function(){ flag = true; }); // 更新下標 num = next; } // 分頁器切換圖片 for (var i = 0; i < lis.length; i++) { // 保存下標lis[i].index == i，方便后期給每個lis添加點擊事件 lis[i].index = i; // 給每個lis添加點擊事件 lis[i].onclick = function(){ for(var j = 0; j < lis.length; j++){ // 如果點擊的是當前一張圖片，即num == this.index；不能切換圖片 if (num == this.index) { return; }; // 讓當前的下標的圖片就位到右邊 as[this.index].style.left = widths + 'px'; lis[num].className = ''; lis[this.index].className = 'active'; // 將當前的一張移動到left：-width的位置 animate(as[num], { left: -widths }); // 將符合下標的一張圖片移動到left：0的位置 animate(as[this.index], { left: 0 }) // 更新下標 num = this.index; } } }; // 點擊右邊向想左移動 btnR.onclick = function(){ if (flag) { flag = false; moveL(); } } // 點擊左邊向想左移動 btnL.onclick = function(){ if (flag) { flag = false; moveR(); } } // 鼠標滑過win時清除時間函數 win.onmouseover = function() { clearInterval(timer); }; // 鼠標離開win時開啟時間函數 win.onmouseout = function() { timer = setInterval(moveL, 2000); }; } </script>
。