轮播
HTML
<div class="box">
<ul class="imgList">
<li style=""><a href="javascript:;"><img src="images2/1.jpg" alt="" /></a></li>
<li style=""><a href="javascript:;"><img src="images2/2.jpg" alt="" /></a></li>
<li style=""><a href="javascript:;"><img src="images2/3.jpg" alt="" /></a></li>
</ul>
<ol class="btnList">
<li class="current">1</li>
<li>2</li>
<li>3</li>
</ol>
<div class="leftBtn"></div>
<div class="rightBtn"></div>
</div>
CSS
.box{
height:435px;
position:relative;
}
.box .imgList{
height:435px;
}
.box .imgList li{
position:absolute;
width:100%;
height:435px;
left:0;
top:0;
display: none;
overflow:hidden;
}
.btnList{
height:22px;
position:absolute;
right:10px;
bottom:10px;
width:100%;
text-align:center;
font-size:0;
}
.imgList img{
width:1680px;
height:435px;
position:absolute;
left:50%;
top:0;
margin-left:-840px;
}
.btnList li{
width:30px;
height:20px;
display:inline-block;
border: 1px solid #fff;
line-height:20px;
text-align:center;
background: rgba(0,0,0,.3);
margin-right: 10px;
color:#fff;
cursor: pointer;
font-size:12px;
}
.btnList li.current{
background: rgba(0,0,0,.7);
}
.leftBtn,.rightBtn{
position:absolute;
width:40px;
height:70px;
left:50%;
top:50%;
margin-top: -35px;
margin-left: -640px;
background: rgba(0,0,0,.5) url(images/xiaomi/left.gif) center center no-repeat;
cursor: pointer;
}
.rightBtn{
left:auto;
left:50%;
margin-left: 600px;
background-image: url(images/xiaomi/right.gif);
}
JS
引入
jquery.min.js文件
$(function() {
// 用来模拟点击获取的图片的下标
var num = 0;
var rightBtn = $('.rightBtn');
var leftBtn = $('.leftBtn');
var imgList = $('.imgList li');
var btnList = $('.btnList li');
var box = $('.box');
var len = btnList.length;
var timer = null;
//JQ初始化css
imgList.first().show();
// 点击往右走
rightBtn.click(rightFn);
// 封装向右走的功能
function rightFn(event) {
// 注意，永远我们只需要操作两张图片，num在没有加加之前是代表当前用户正在看到的那张图，加加之后，就表示下一张用户想要看到的图片
imgList.eq(num).stop().fadeOut(1000);
btnList.eq(num).removeClass('current');
// 每点击一次就让num加一次
// 做一个极值判断
num++;
if(num > len - 1){
num = 0;
}
// 让用户想要看到的哪一张淡入进来
imgList.eq(num).stop().fadeIn(1000);
// 让用户想要看到的哪一张的角标添加上当前类
btnList.eq(num).addClass('current');
}
// 点击往左走
leftBtn.click(function(event) {
// 注意，永远我们只需要操作两张图片，num在没有加加之前是代表当前用户正在看到的那张图，加加之后，就表示下一张用户想要看到的图片
imgList.eq(num).stop().fadeOut(1000);
btnList.eq(num).removeClass('current');
// 每点击一次就让num加一次
// 做一个极值判断
num--;
if(num < 0){
num = len - 1;
}
// 让用户想要看到的哪一张淡入进来
imgList.eq(num).stop().fadeIn(1000);
// 让用户想要看到的哪一张的角标添加上当前类
btnList.eq(num).addClass('current');
});
//点击角标让对应的图片淡入进来，之前的淡出
btnList.click(function(event) {
imgList.eq(num).stop().fadeOut(1000);
btnList.eq(num).removeClass('current');
// 这里一定注意，将你点击的那个元素的下标值赋值给num取得统一
num = $(this).index();
// 让用户想要看到的哪一张淡入进来
imgList.eq(num).stop().fadeIn(1000);
// 让用户想要看到的哪一张的角标添加上当前类
btnList.eq(num).addClass('current');
});
timer = setInterval(rightFn, 1500);
//鼠标移动到box上面去的时候清除定时器，离开定时器开启
box.hover(function() {
clearInterval(timer);
}, function() {
clearInterval(timer);
timer = setInterval(rightFn, 1500);
});
});
