jQuey实现轮播图效果
程序员文章站
2022-06-18 23:39:26
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片上,自动切换轮播图停止 3. 指示点划过切换对应的图片,图片切换时提示点跟随切换 4. 点击上一页下 ......
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式
首先介绍一下,本文实现的轮播图的基本效果:
1. 3s自动切换图片,图片切换时提示点跟随切换
2. 鼠标划到图片上,自动切换轮播图停止
3. 指示点划过切换对应的图片,图片切换时提示点跟随切换
4. 点击上一页下一页按钮切换图片
5. 图片切换时有渐变的效果
下表面开始代码的书写
css代码
/*初始化浏览器默认样式*/ *{ margin: 0; padding: 0; } /*sowingmap*/ .sowingmap{ width: 800px; height: 500px; margin: 0 auto; position: relative; overflow: hidden; } /*imgpart*/ .imgpart{ width: 800px; height: 500px; position: absolute; } /*imgswitch*/ .imgswitch{ width: 800px; height: 500px; position: absolute; list-style: none; display: none; cursor: pointer; } .imgswitch img{ width: 100%; height: 500px; } .imgshow{ display: block; } /*spotpart*/ .spotpart{ position: absolute; bottom: 0; height: 40px; left: 36%; } .spotpart p{ width: 20px; height: 20px; border-radius: 100%; background-color: #fff; float: left; margin-left: 20px; cursor: pointer; } /*提示点的选中颜色*/ .spotpart .spotcolor{ background-color: #f00; } /*上一张下一张切换部分*/ .preimg , .nextimg{ width: 70px; height: 70px; border-radius: 100%; background-color: rgba(255,255,255,0.5); text-align: center; line-height: 70px; font-size: 30px; color: #f5f5f5; position: absolute; top: 190px; cursor: pointer; display: none; } .preimg{ left: -35px; text-indent: 25px; } .nextimg{ right: -35px; text-indent: -25px; }
html代码
<div class="sowingmap"> <ul class="imgpart"> <li class="imgswitch imgshow"><img src="img/1.jpg"/></li> <li class="imgswitch"><img src="img/2.jpg"/></li> <li class="imgswitch"><img src="img/3.jpg"/></li> <li class="imgswitch"><img src="img/4.jpg"/></li> <li class="imgswitch"><img src="img/5.jpg"/></li> </ul> <div class="spotpart"> <p class="spotcolor"></p> <p></p> <p></p> <p></p> <p></p> </div> <div class="loopchange"> <p class="preimg"><</p> <p class="nextimg">></p> </div> </div>
轮播图功能实现的js代码
//获取元素的个数 var count = $('.imgswitch').length; var num = 0; var start = null; //业务1:实现3s钟自动循环切换图片,图片切换时提示点跟随切换,图片切换时有渐变的效果 function loopstart() { clearinterval(start); start = setinterval(function() { //首先清楚所有样式 $('.imgswitch').hide(); //取余方式对num取值进行判断 num = (num + 1) % count; //图片渐入 $('.imgswitch').eq(num).fadein(1000); $('.spotpart p').eq(num).addclass("spotcolor").siblings().removeclass("spotcolor"); }, 2000); } loopstart(); //业务2:鼠标划到图片上,轮播图停止自动切换,划出后继续播放 $('.imgswitch').mouseover(function() { //鼠标划过停止 clearinterval(start); }); $('.imgswitch').mouseout(function() { //鼠标划出 loopstart(); }); //业务三:指示点划过切换对应的图片,图片切换时提示点跟随切换 $('.spotpart p').mouseover(function() { clearinterval(start); //首先清楚所有样式 $('.imgswitch').hide(); $('.imgswitch').eq($(this).index()).fadein(1000); $('.spotpart p').eq($(this).index()).addclass("spotcolor").siblings().removeclass("spotcolor"); }); $('.spotpart p').mouseout(function() { loopstart(); }); //业务四:点击上一页下一页切换 $('.sowingmap').mouseover(function() { clearinterval(start); $('.loopchange p').show(); }); $('.sowingmap').mouseout(function() { loopstart(); $('.loopchange p').hide(); }); $('.preimg').click(function() { $('.imgswitch').hide(); if(num <= 0) { num = 4; $('.imgswitch').eq(num).fadein(1000); $('.spotpart p').eq(num).addclass("spotcolor").siblings().removeclass("spotcolor"); } else if(num <= 4) { $('.imgswitch').eq(num-1).fadein(1000); $('.spotpart p').eq(num-1).addclass("spotcolor").siblings().removeclass("spotcolor"); num--; } }); $('.nextimg').click(function() { $('.imgswitch').hide(); if(num >= 4) { num = 0; $('.imgswitch').eq(num).fadein(1000); $('.spotpart p').eq(num).addclass("spotcolor").siblings().removeclass("spotcolor"); } else if(num >= 0) { $('.imgswitch').eq(num+1).fadein(1000); $('.spotpart p').eq(num+1).addclass("spotcolor").siblings().removeclass("spotcolor"); num++; } });
注意,不要忘记引入jquery的语法库,不然会报错的哟!!!
对于上述索引范围的判断,介绍一种简单的办法,此种办法,使用的时一个数取于所获的元素的length值,不管如何,他的范围只是会0~a.length之间
num = (num + 1) % count;
ok,很方便的使用jquery实现了轮播图效果,欢迎您提出宝贵的意见!!!