为什么我点击banner图的时候 图片轮播会异常
来源：1-13 作业题
qq_余生久别_0
2018-09-05 20:54:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
.main{
width: 1200px;
height: 460px;
margin: 0 auto;
border: 8px solid #bbb;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
position: absolute;
}
.slide-active{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
}
.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);
}
.prev{
position: relative;
top: 50%;
margin: -15px 0 0 20px;
width: 16px;
height: 30px;
background-image:url(img/pre2.png);
background-repeat:no-repeat;
z-index: 999;
}
.next{
position: relative;
top: 50%;
margin: -30px 0 0 1164px;
width: 16px;
height: 30px;
background-image:url(img/pre.png);
background-repeat:no-repeat;
z-index: 999;
}
.slide-active{
display:block;
}
.dots{
position: relative;
top: 380px;
left: 1000px;
}
.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;
}
.bj1{
width: 60px;
height: 80px;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
top: 50%;
margin: -55px 0 0 0px;
}
.bj2{
width: 60px;
height: 80px;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
top: 50%;
left: 1140px;
margin: -55px 0 0 0px;
}
</style>
<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>
<div class="prev"></div>
<div class="next"></div>
<div id="bj1"></div>
<div id="bj2"></div>
<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 type="text/javascript">
var index=0;
pics=$('#banner>a>div'),
dots=$('#dots>span'),
size=pics.length,
timer=null;
$(function(){
//封装清楚事件
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//自动轮播
function starAutoPlay(){
timer=setInterval(function(){
index++;
if (index>=size ){
index=0;
}
changeImg();
},3000)
}
//移入触发清除事件
starAutoPlay();
$('.banner-slide').mousemove(function() {
stopAutoPlay();
});
//移出触发自动轮播事件
$('.banner-slide').mouseleave(function(event) {
starAutoPlay();
});
//上一张下一张
$('.prev').click(function(){
index--;
if(index==-1){
index=size-1;
}
changeImg();
})
$('.prev').mousemove(function() {
$('#bj1').addClass('bj1')
});
$('.next').mousemove(function() {
$('#bj2').addClass('bj2')
});
$('.prev').mouseleave(function() {
$('#bj1').removeClass('bj1')
});
$('.next').mouseleave(function() {
$('#bj2').removeClass('bj2')
});
$('.next').click(function(){
index++;
if(index>=size){
index=0;
}
changeImg();
})
dots.each(function(num){
$(this).click(function(){
index=num;
changeImg();
});
}) ;
//封装轮播事件
function changeImg(){
pics.removeClass('slide-active');
dots.removeClass('active');
pics.eq(index).addClass('slide-active');
dots.eq(index).addClass('active');
}
})
</script>
</body>
</html>
1回答
-
1、图片外面包裹了a标签，所以点击图片的时候会跳转刷新页面，可以阻止一下a链接的跳转事件，如下：
2、点击小圆点的时候，点击事件和轮播会一起进行，这样是不对的，建议把移入移除事件添加到最外层main盒子上面。
3、水平方向上出现了滚动条，如下：
是小圆点设置相对定位的原因，建议将小圆点设置相对于main盒子来定位。
自己完善下，祝学习愉快~~
0
相似问题