1-11作业问题
来源：1-13 作业题
慕码人1565653
2018-05-11 13:11:10
<!DOCTYPE html>
<html>
<head>
<title>exercise</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="exercise.css">
</head>
<body>
<div class="main">
<div class="banner" id="banner">
<a href=""><div class="banner-slide slide1 active-slide"></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>
</div>
<div class="dot" id="dot">
<span class="active-dot"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="button pre" id="pre"></div>
<div class="button next" id="next"></div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="exercise.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
.main{
width: 1200px;
height: 460px;
margin:20px auto;
position:relative;
overflow: hidden;
border: 10px solid #bbb;
}
.banner{
width:1200px;
height: 460px;
position: relative;
overflow: hidden;
}
.banner-slide{
width: 1200px;
height:460px;
background-repeat: no-repeat;
display: none;
}
.active-slide{
display: block;
}
.slide1{
background-image: url(Image/1.jpg);
}
.slide2{
background-image: url(Image/2.jpg);
}
.slide3{
background-image: url(Image/3.jpg);
}
.slide4{
background-image: url(Image/4.jpg);
}
.slide5{
background-image: url(Image/5.jpg);
}
.dot{
position: absolute;
bottom:24px;
right:50px;
}
.dot span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dot span.active-dot{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
.button{
width:40px;
height:80px;
position:absolute;
top:50%;
margin-top: -20px;
left:;
background:url(Image/pre.png) center center no-repeat;
transform:rotate(180deg);
cursor: pointer;
}
.next{
right:0;
transform:rotate(0deg);
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
}
var timer=null,
index=0,
pics=$('.banner-slide'),
length=pics.length;
$(function(){
//图片改变
function changeIamge(){
$('.banner-slide').each(function(){
$('.banner-slide').removeClass('active-slide');
$('span').removeClass('active-dot');
})
$('.banner-slide').eq(index).addClass('active-slide');
$('span').eq(index).addClass('active-dot');
}
//下一张
$('#next').click(function(){
index++;
if(index>=length)
index=0;
changeIamge();
})
//上一张
$('#pre').click(function(){
index--;
if(index<0)
index=length-1;
changeIamge();
})
//遍历小圆点
$('span').each(function(element){
$(this).click(function(){
index = element;
changeIamge();
});
})
//鼠标悬浮触发事件
$('.main').on('mouseover',function(event){
if(timer){
clearInterval(timer);
}
})
$('.mian').on('mouseout',function(event){
Autoplayer();
})
function Autoplayer(){
timer=setInterval(function(){
index++;
if(index>=length){
index=0;
}
changeIamge();
},1000)
}
Autoplayer()
});
为什么刚刷新页面时能实现自动播放，但是只要将鼠标移入再移除后图片就停止播放了呢？希望老师指点
1回答
-
好帮手慕星星
2018-05-11
经测试是因为你获取元素的单词写错了，如下：
应该是main，自己再测试下，祝学习愉快~~
0
