首页 > 代码库 > jQuery的几种轮播
jQuery的几种轮播
我们在开发当中经常用到轮播。我在这里总结了一下几种,仅供参考:
第一种:
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方法设置第一张图片显示,其余隐藏 $(‘.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); if(i == 0){ //注意此时i的值 i = 5; } i--; Show(); showTime(); }); //鼠标点击右侧的箭头 $(‘.btn2‘).click(function(){ clearInterval(timer); if(i == 4){ //当图片是最后一张时,点击右箭头, i = -1; } i++; 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‘); }
。
jQuery的几种轮播
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。