老师，怎么样实现点击小圆点，切换图片啊？
来源：1-13 作业题
慕的地3227104
2017-11-28 20:28:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> jQuery实现轮播图</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/JQ/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="title">jQuery实现轮播图</div>
<div class="main">
<div class="banner">
<div class="baner-pic active"><img src="images/1.jpg"></div>
<div class="baner-pic"><img src="images/2.jpg"></div>
<div class="baner-pic"><img src="images/3.jpg"></div>
<div class="baner-pic"><img src="images/4.jpg"></div>
<div class="baner-pic"><img src="images/5.jpg"></div>
</div>
<button class="next-button"><img src="images/pre.png"></button>
<button class="prev-button"><img src="images/pre2.png"></button>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
$(function(){
//写轮播图的关键在于能否正确的利用图片的索引
var index=0,
timer=null,
pics=$('.banner').children(),
len=pics.length,
dots=$('.dots').children();
function slideImg(){
//鼠标划过的时候，清除定时器
$('.main').mouseover(function(){
if(timer) clearInterval(timer);
})
//当鼠标离开时，添加定时器，图片轮播
$('.main').mouseout(function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg()
},2000)
})
//添加一个mouseout()事件，实现图片自动轮播
$('.main').mouseout();
//下一张
$('.next-button').click(function(){
index++;
if(index>=len){
index=0;
}
changeImg()
})
//上一张
$('.prev-button').click(function(){
index--;
if(index<0){
index=len-1;
}
changeImg()
})
//点击小圆点，切换图片
dots.click(function(){
dots.each(function(i){
$(this).attr('id','')
})
index=$(this).attr('id');
changeImg()
})
}
function changeImg(){
pics.each(function(index){
$(this).hide();
});
pics.eq(index).show();
}
slideImg()
})
*{
margin:0px;
padding: 0px;
}
ul,li{
list-style: none;
}
.title{
text-align: center;
font-size: 20px;
margin-top:40px;
font-weight: bold;
margin-bottom: 10px;
}
.main{
width:1200px;
height:460px;
border:10px solid #ccc;
margin:0 auto;
position: relative;
}
.banner{
width: 100%;
height: 100%;
}
.banner .baner-pic{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left:0px;
display: none;
}
.main .banner .active{
display:block;
}
.next-button{
width:30px;
height:60px;
position: absolute;
top:50%;
right:0px;
margin-top:-30px;
border-style:none;
}
.prev-button{
width:30px;
height:60px;
position: absolute;
top:50%;
left:0px;
margin-top:-30px;
border-style:none;
}
.next-button:hover,.prev-button:hover{
background:rgba(0,0,0,0.3);
}
.dots{
position: absolute;
right: 50px;
bottom: 30px;
z-index: 10000;
}
.dots span{
width:12px;
height:12px;
background: #000;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
1 | <br> |
Jquery的便利是如何实现的？？、不是很明白。
1回答
-
小丸子爱吃菜
2017-11-29
可以参考一下下面的代码
1、先获取到当前的下标位置，这个很关键，获取到了当前下标的位置，使用循环写也好，使用其它方法写也可以。如果使用循环，就可以参照JS中的轮播图的切换原理去写。
下面的步骤，用的不是循环方面的，可以参考一下：
2、给是这个下标的图片添加显示的样式，其它的图片移除掉显示的样式。
3、当前的圆点添加显示时的样式，其它的圆点移除掉显示的样式。
建议可以参考上面的思路去写！
祝学习愉快！
0
相似问题
回答 1
回答 3