轮播图上下按钮 点击问题
<body>
<div class="main">
<div class="banner">
<a href=""><img class=" pic one active" src="imgs/1.jpg" alt=""></a>
<a href=""><img class=" pic two " src="imgs/2.jpg" alt=""></a>
<a href=""><img class=" pic three" src="imgs/3.jpg" alt=""></a>
<a href=""><img class=" pic four" src="imgs/4.jpg" alt=""></a>
<a href=""><img class=" pic five" src="imgs/5.jpg" alt=""></a>
</div>
<div class="dot">
<ul>
<li class="dotment active"></li>
<li class="dotment"></li>
<li class="dotment"></li>
<li class="dotment"></li>
<li class="dotment"></li>
</ul>
</div>
<div class="btn">
<img class="next" src="imgs/pre.png">
<img class="pre" src="imgs/pre2.png">
</div>
</div>
<script src="../作业/js/jQuery_1.12.4.js"></script>
<script src="js/zuoye.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
.main{
width: 800px;
height: 500px;
margin:30px auto ;
position: relative;
overflow: hidden;
}
.banner img{
width:800px;
height:500px;
position:absolute;
top:0;
left: 0;
}
.btn .pre{
position:absolute;
top:50%;
left:5px;
margin-top: -10px;
}
.btn .next{
position:absolute;
top:50%;
right:5px;
margin-top: -10px;
}
.pre:hover,.next:hover{
background:#aaa;
}
.btn img{
height: 40px;
width: 20px;
}
.pic{
display:none;
}
.pic.one.active{
display: block;
}
.dot ul{
list-style:none;
position:absolute;
bottom: 10px;
right:22px;
}
.dot ul li{
height: 7px;
width:7px;
border: 2px solid #eee;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
background:#ccc;
cursor:pointer;
}
.dot.active{
background:#fff;
}
$(function(){
var index=0;
var timer=null;
var banner=$('.pic');
//鼠标滑过界面
banner.mouseover(function(){
if(timer){
clearInterval(timer);
}
})
//鼠标离开图片
banner.mouseout(function() {
timer=setInterval(function(){
index++;
if(index>=banner.length){
index=0;}
changeimg()
}, 2000)
});
//设置小圆点点击事件
var dot=$('.dotment');
for(var n=0;n<dot.length;n++)
{ dot.eq(n).attr({
id:n,
});
console.log(dot.eq(n));
dot.eq(n).on('click',function(){
index=this.id;
changeimg()
if(timer){
clearInterval(timer);
}
})
}
//设置前后按钮
//向上
var pre=$('.pre')
pre.click(function() {
index--;
if(index<0){
index=banner.length;}
changeimg()
if(timer){
clearInterval(timer);
}
})
//向下
var next=$('.next')
next.click(function() {
index++;
if(index>banner.length){
index=0;}
changeimg()
if(timer){
clearInterval(timer);
}
})
//定义轮播函数
function changeimg(){
for(var i=0;i<banner.length;i++)
{
banner.eq(i).hide();
dot.eq(i).css('background', '#ccc');
}
banner.eq(index).show();
dot.eq(index).css('background', '#fff');
}
})
第一张点击上一张或者是最后一张点击下一张都会出现一个空白面。需要再次点击，求解答
正在回答
//鼠标离开图片
// banner.mouseout(function() {
function lunbo() {
timer = setInterval(function() {
index++;
if (index >= banner.length) {
index = 0;
}
changeimg();
}, 2000);
}
lunbo();
banner.mouseout(lunbo);原理是一样的，JS的理解了，这个自然也就会了。
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星