想让轮播图自动播放，结果不行，也是醉了
// 鼠标离开，开始加定时器，即实现图片自动切换
wholeSlide.mouseout(function(){
timer=setInterval(function(){
index++;
if(index>=lenl) index=0;
changeImg();
},1000)
})
// 自动执行
wholeSlide.mouseout();//这一行代码无效，也不知道为什么
正在回答 回答被采纳积分+1
你好，以下是我根据你的代码进行的测试，是可以正常运行的，你可以查看下；祝学习愉快！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入文本</title>
<style>
.wholeSlide{ width:750px; height: 540px; position:relative; left:550px; top:0; /*background: orange;*/ }
.slide{ width: 720px; height: 520px; position: absolute; left: 20px; top:20px; }
.banner-slide{ width: 100%; height: 100%; background-repeat:no-repeat; position:absolute; display: none; }
.slide-active{ display: block; }
.slide1{ background-image: url(images/1.jpg); background-size: 720px 520px; }
.slide2{ background-image: url(images/2.jpg); background-size: 720px 520px; }
.slide3{ background-image: url(images/3.jpg); background-size: 720px 520px; }
.slide4{ background-image: url(images/4.jpg); background-size: 720px 520px; }
.slide5{ background-image: url(images/5.jpg); background-size: 720px 520px; }
/*.slide6{ background-image: url(../images/focus-carousel/6.jpg); background-size: 720px 520px; }*/
</style>
</head>
<body>
<div class="wholeSlide" id="wholeSlide">
<div class="slide" id="slide">
<a href="#"> <div class="banner-slide slide1 slide-active"></div> </a>
<a href="#"> <div class="banner-slide slide2 "></div> </a>
<a href="#"> <div class="banner-slide slide3 "></div> </a>
<a href="#"> <div class="banner-slide slide4 "></div> </a>
<a href="#"> <div class="banner-slide slide5 "></div> </a>
<!-- <a href="#"> <div class="banner-slide slide6 "></div> </a> -->
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
index=0,timer=null,
pics=$('#slide').children('a').children('.banner-slide'),
lenl=pics.length,
prev=$('#prev'),next=$('#next'),
dots=$('#dots').children(),
wholeSlide=$('#wholeSlide');
function slideImg(){
// 鼠标滑过清除定时器，图片不再切换，离开继续
wholeSlide.mouseover(function(){
// 清除定时器
if(timer) clearInterval(timer);
})
// 鼠标离开，开始加定时器，即实现图片自动切换
wholeSlide.mouseout(function(){
timer=setInterval(function(){
index++;
if(index>=lenl) index=0;
changeImg();
},1000)
}) // 自动执行
wholeSlide.mouseout();
// 按钮切换图片
function changeImg(){
// 先遍历所有图片和圆点
for(var m=0;m<lenl;m++){
pics.eq(m).hide();
dots.eq(m).removeClass('active');
}
pics.eq(index).show();
dots.eq(index).addClass('active');
}
}
slideImg();
</script>
</body>
</html>
就是这样的，wholeSlide.mouseout();是想达到自动执行的目的，但是无效，以前做的轮播图都是可以的呀。
代码如下： // 轮播图
var index=0,timer=null,pics=$('#slide').children('a').children('.banner-slide'),lenl=pics.length,
prev=$('#prev'),next=$('#next'),dots=$('#dots').children(),wholeSlide=$('#wholeSlide');
function slideImg(){
// 图片切换
// 鼠标滑过清除定时器，图片不再切换，离开继续
wholeSlide.mouseover(function(){
// 清除定时器
if(timer) clearInterval(timer);
})
// 鼠标离开，开始加定时器，即实现图片自动切换
wholeSlide.mouseout(function(){
timer=setInterval(function(){
index++;
if(index>=lenl) index=0;
changeImg();
},1000)
})
// 自动执行
wholeSlide.mouseout();
// 按钮切换图片
prev.click(function(){
index--;
if(index<0) index=lenl-1;
changeImg();
})
next.click(function(){
index++;
if(index>=lenl) index=0;
changeImg();
})
// 圆点切换图片
for(var d=0;d<lenl;d++){
if(timer) clearInterval(timer);
dots.eq(d).attr('id',d);
dots.eq(d).click(function(){
index=this.getAttribute('id');
console.log(index);
changeImg();
})
}
}
function changeImg(){
// 先遍历所有图片和圆点
for(var m=0;m<len;m++){
pics.eq(m).hide();
dots.eq(m).removeClass('active');
}
pics.eq(index).show();
dots.eq(index).addClass('active');
}
slideImg();
注意，问题是点进去不能够自己播放，需要我自己去滑动一下才可以！我希望达到的效果是，页面一打开就可以自动播放了。
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星