再平常的浏览器页面，轮播图都是必不可缺少的一个板块，在这总结了一下轮播图基本的一些样式
首先介绍一下，本文实现的轮播图的基本效果：
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实现了轮播图效果，欢迎您提出宝贵的意见！！！
如对本文有疑问， 点击进行留言回复！！
网友评论