1-11作业
来源：1-13 作业题
Reborn丶
2018-07-24 22:47:41
HTML部分
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.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="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS部分：
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
a:link,a:visited{
color:#5e5e5e;
}
body{
font-family:"微软雅黑";
color: #14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
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;
transform:rotate(180deg);
top: 50%;
left: 0;
height: 80px;
width: 40px;
margin-top:-40px;
background:url(../img/pre.png) center center no-repeat;
}
.next{
background:url(../img/pre2.png) center center no-repeat;
left:auto;
right:0;
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
}
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
.dots 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;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
JS部分：
var pics = $('#banner div'),
dots = $('#dots'),
next = $('#next'),
prev = $('#prev');
var timer = null,
index = 0,
size = pics.length;
function slideImg(){
var main = $('.main'),
banner = $('.banner'),
mouseover = function (){
stopAutoPlay();
},
mouseout = function () {
startAutoPlay();
}
//点击圆点切换图片
for(var i=0,len=dots.length;i<len;i++){
dots[i].id = i;
dots[i].click(function() {
index = this.id;
changeImg();
})
}
//设置左右箭头的点击事件
//上一张
prev.click(function() {
index--;
if(index<0)
index = size-1;
changeImg();
}
)
//下一张
next.click(function() {
index++;
if(index>=size)
index=0;
changeImg();
})
}
interval()
// 鼠标移入 暂停 自动轮播
$('.banner').mouseover(function () {
clearInterval(timer)
})
.mouseout(interval)
function interval() {
timer = setInterval(slideImg, 2000)
}
function changeImg(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].removeClass('');
pics[i].css('display','none');
}
dots[index].addClass('active');
pics[index].css('display','block');
}
麻烦老师看看，感觉自己找不到哪里出问题了。。有点迷茫，麻烦老师帮忙
1回答
-
你好，1、小圆点这里，不是要获取dots，而是dots下的span元素，例：
2、图片的切换可以使用jq的方式，例:
3、可以在slideImg()函数中，只写图片需索引改变，然后调用图片变化函数，获取元素，已经单击事件，可以存放在函数外面。
、4、小圆球的点事件，可以按照jquery的方式来写，可以按照index()方法，获取索引。
5、鼠标移入暂停这里，应该设置个最外层的大盒子，不能只设置给图片，否则点击小圆点的时候，图片会继续轮播。
若能解决你的疑问，望采纳。
祝学习愉快~
1
