再平常的浏览器页面，轮播图都是必不可缺少的一个板块，在这总结了一下轮播图基本的一些样式
首先介绍一下，本文实现的轮播图的基本效果：
1. 3s自动切换图片,图片切换时提示点跟随切换
2. 鼠标划到图片上，自动切换轮播图停止
3. 指示点划过切换对应的图片，图片切换时提示点跟随切换
4. 点击上一页下一页按钮切换图片
5. 图片切换时有渐变的效果
下表面开始代码的书写
css代码
/*初始化浏览器默认样式*/
*{
margin:;
padding:;
}
/*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:;
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;
}
css代码块
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实现了轮播图效果，欢迎您提出宝贵的意见！！！