13.轮播(练习)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="../0307/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.content{
width: 520px;
height: 280px;
margin: 0 auto;
position: relative;
}
.content .pic a{
position: absolute;
top: 0;
left: 0;
display: none;
}
.content .pic a.current{
display: block;
}
.content .indicator{
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.content .indicator span{
background-color: black;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
margin-left: 5px;
cursor: pointer;
box-sizing: border-box;
}
.content .indicator span.active{
background-color: red;
border: 1px solid blue;
}
.content .page{
position: absolute;
right: 20px;
bottom: 10px;
color: white;
}
.content .page span{
display: inline-block;
width: 30px;
height: 30px;
background-color: rgba(100,100,100,0.7);
text-align: center;
line-height: 30px;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
.content .page span:hover{
background-color: rgba(100,100,100,0.95);
}
</style>
</head>
<body>
<div class="content">
<div class="pic">
<a class="current" href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
<div class="indicator">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="page">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
// 记录图片的索引,初始是第一张
var index = 0;
var timer = setInterval(nextImg,3000);
// 下一张图
function nextImg(){
// index++;
// index = index == $('.content .pic a').length - 1 ? 0 : index+1;
// 与上面的三目运算等价的
if(index == $('.content .pic a').length - 1)
{
index = 0;
}else
{
index++;
}
showImg();
}
// 上一张图
function prevImg(){
// index = index == 0 ? $('.content .pic a').length - 1 : index - 1;
// 与上面的三目运算等价的
if(index == 0)
{
index = $('.content .pic a').length - 1;
}
else{
index--;
}
showImg();
}
// 切换图片用的函数
function showImg(){
// 链式调用
$('.content .pic a')
.eq(index).show()
.siblings().hide();
$('.content .indicator span')
.eq(index).addClass('active')
.siblings().removeClass('active');
}
// 上一张的点击方法
$('.content .page .prev').click(function(){
prevImg();
});
// 下一张的点击方法
$('.content .page .next').click(function(){
nextImg();
});
// 鼠标移动时改变图片
$('.content .indicator span').hover(function(){
clearInterval(timer);
index = $(this).index();
showImg();
},function(){
timer = setInterval(nextImg,3000);
});
//鼠标移动时停止图片滚动
$('.content .pic a').hover(function(){
clearInterval(timer)
},function(){
timer = setInterval(nextImg,3000)
})
});
</script>
