老师 效果无法实现，jQuery代码没有头绪，请指点修改一下
来源：1-13 作业题
远小远
2018-12-31 15:35:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery作业</title>
<link rel="stylesheet" type="text/css" href="css/作业.css">
</head>
<body>
<div class="main" id="main">
<!--图片轮播-->
<div class="banner" id="banner">
<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>
</div>
<!--上一张、下一张按钮-->
<a href="javascript:void(0)" class="button prev" id="button prev"></a>
<a href="javascript:void(0)" class="button next" id="button next"></a>
<!--圆点导航-->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="js/作业.js"></script>
</body>
</html>
*{
margin:0;
padding：0；
}
ul{
list-style: none;
}
body{
font-family: '微软雅黑';
color:#14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
overflow:hidden;
border:10px solid #bbb;
position: relative;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position: relative;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide-active{
display:block;
}
.slide1{
background-image:url("../img/1.jpg")
}
.slide2{
background-image:url("../img/2.jpg")
}
.slide3{
background-image:url("../img/3.jpg")
}
.slide4{
background-image:url("../img/4.jpg")
}
.slide5{
background-image:url("../img/5.jpg")
}
.button{
position: absolute;
width: 40px;
height:80px;
top:50%;
margin-top: -40px;
}
.button:hover{
background-color:#333;
opacity: 0.6;
filter:alpha(opacity=60);
}
.prev{
background: url(../img/pre2.png) no-repeat center center;
}
.next{
right:0;
background:url(../img/pre.png) no-repeat center center;
}
.dots{
position: absolute;
right:24px;
bottom:16px;
text-align: right;
}
.dots span{
display:inline-block;
width: 10px;
height:10px;
border-radius: 50%;
background:rgba(7,17,27,0.4);
margin-left:8px;
line-height: 12px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
margin-left:10px;
cursor: pointer;
}
.dots span.active{
box-shadow:0 0 0 2px rgba(7,17,27,0.4) ;
background:#fff;
}
$(function(){
//给圆点绑定点击事件，点击对应圆点跳转到对应图片
$("#dots span").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
$("#banner div").eq(index).addClass("slide-active").siblings().removeClass("slide-active");
})
//给上一张，下一张按钮绑定点击事件
$("#button prev").click(function(){
var index=$("#banner div").index();
if(index<0){
index=4
}else if(index>4){
index=0
};
$("#banner div").eq(index-1).addClass("slide-active").siblings().removeClass("slide-active");
})
$("#button next").click(function(){
if(index<0){
index=4
}else if(index>4){
index=0};
$("#banner div").eq(index+1).addClass("slide-active").siblings().removeClass("slide-active");
})
//给图片增加定时器自动轮播
$("#main").mouseout(function(){
var timer=null;
timer=setInterval(function({
}),2000)
})
//鼠标滑过清除定时器
$("#main").mouseover(function(){
timer.clearInterval();
})
})
1回答
-
测试了同学的代码，整体的思路是正确的，建议同学先自己再尝试着完善一下，然后提交作业，在作业批复建议中，老师会给出详细的修改建议的哦
祝学习愉快！
0
相似问题