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背景变成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>
。