标签：htm oop idt lin 渐变 100% src sibling var
再平常的浏览器页面，轮播图都是必不可缺少的一个板块，在这总结了一下轮播图基本的一些样式
首先介绍一下，本文实现的轮播图的基本效果：
1. 3s自动切换图片,图片切换时提示点跟随切换
2. 鼠标划到图片上，自动切换轮播图停止
3. 指示点划过切换对应的图片，图片切换时提示点跟随切换
4. 点击上一页下一页按钮切换图片
5. 图片切换时有渐变的效果
下表面开始代码的书写
/*初始化浏览器默认样式*/ *{ 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; }
<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>
//获取元素的个数 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实现了轮播图效果，欢迎您提出宝贵的意见！！！
标签：htm oop idt lin 渐变 100% src sibling var
原文地址：https://www.cnblogs.com/qdclub/p/9782921.html
