web的几种轮播
我們在開發當中經常用到輪播。我在這里總結了一下幾種，僅供參考：
第一種：
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背景變成redinnerImg[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>?
?
?
。
轉載于:https://www.cnblogs.com/tanxiang6690/p/6957709.html
總結
- 上一篇： 套接口学习(一)实现
- 下一篇： 13-day13-str