老师请看问题出在哪里 点击三角 和圆点 无法播放
来源：1-13 作业题
qq_Dxf_0
2018-02-26 15:38:41
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!--图片轮播-->
<div class="banner" id="banner">
<a href="">
<div class="banners slide1 active"></div>
</a>
<a href="">
<div class="banners slide2"></div>
</a>
<a href="">
<div class="banners slide3"></div>
</a>
<a href="">
<div class="banners slide4"></div>
<a href="">
<div class="banners slide5"></div>
</a>
</div>
<!-- 三角 -->
<a href="javascript.void(0)" class="button prve"></a>
<a href="javascript.void(0)" class="button nave"></a>
<!--圆点-->
<div class="radius">
<span class="radiused actived"></span>
<span class="radiused"></span>
<span class="radiused"></span>
<span class="radiused"></span>
<span class="radiused"></span>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript">
$(function(){
var timer=null;
var index=0;
var len=$('.banners').length;
var a=index-1;
console.log(len);
/*鼠标不在页面上*/
$('#main').mouseout(function(){
timer=setInterval(function(){
index++;
if (index>4) {
index=0;
}
console.log(index);
/*切换图片*/
changeImg();
},3000)
})
function changeImg(){
$('.banners').eq(index).addClass('active').parent().siblings().children().removeClass('active');
$('.radiused').eq(index).addClass('actived').siblings().removeClass('actived');
}
/*点击右按钮*/
$('.nave').click(function(){
index++;
if (index>4) {
index=0;
}
changeImg();
})
/*点击左按钮*/
$('.prve').click(function(){
index--;
if (index<0) {
index=4;
}
changeImg();
})
/*鼠标悬浮页面上 清除定时器*/
$('#main').mouseover(function(){
if(timer)clearInterval(timer);
})
/*单击小球*/
$('.radiused span').click(function(){
index=$('.radiused span').index($(this));
function changeImg(){
$('.radiused span').eq(index).addClass('actived')siblings().removeClass('actived');
$('.banners div').eq(index).addClass('active').parent().siblings().children().removeClass('active');
}
changeImg();
})
})
</script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
.main{
width: 1200px;
height: 460px;
overflow: hidden;
margin: 30px auto;
position: relative;
background-color: #0f0;
}
.banner{
width: 1200px;
height: 460px;
/*overflow: hidden;*/
position: relative;
}
.banners{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
position: absolute;
display: none;
float: left;
}
.active{
display: block;
}
.slide1{
background-image: url("../content/1.jpg");
}
.slide2{
background-image: url("../content/2.jpg");
}
.slide3{
background-image: url("../content/3.jpg");
}
.slide4{
background-image: url("../content/4.jpg");
}
.slide5{
background-image: url("../content/5.jpg");
}
.button{
position: absolute;
left: 20px;
top: 50%;
margin-top: -15px;
width: 16px;
height: 30px;
/*background-color: #0f0;*/
}
.nave{
left: auto;
right: 20px;
background: url(../content/pre.png) no-repeat;
}
.prve{
background: url(../content/pre2.png) no-repeat;
}
.button:hover{
background-color: #333;
opacity: 0.5;
}
.radius{
position: absolute;
right: 10px;
bottom: 20px;
text-align: center;
}
.radiused{
border-radius: 50%;
width: 10px;
height: 10px;
margin-left: 10px;
border: 1px white solid;
float: left;
background-color: #bbb;
cursor: pointer;
}
.actived{
background-color: white;
}
2回答
-
1、左右箭头的href值改一下
小圆点的选择器写错了，这个获取到的是谁？
这里直接这么写就行了
祝学习愉快！
0h018-02-26 -
小丸子爱吃菜
2018-02-27
<a href="javascript.void(0)" class="button prve"></a>检查一下这个语法哪里有错误
0
相似问题