轮播图圆点中间选中，能禁止吗？

小彬__ 2018-06-07

源自：jQuery插件 1-13 作业题

收起

3回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-06-07 18:36:07

收起回答

小彬__ 提问者 #1

非常感谢！

2018-06-07 19:05:15

提问者小彬__ 2018-06-07 18:21:06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业5</title>
<link rel="stylesheet" type="text/css" href="css/作业5.css">
</head>
<body>
<div class="content">
<h2>jQuery实现轮播图</h2>
<div class="box">
<!-- 图片区 -->
<div class="img1 active"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
<div class="img5"></div>
<!-- 左右图标 -->
<a href="javascript:void(0)" class="but pre1"></a>
<a href="javascript:void(0)" class="but pre2"></a>
</div>
<!-- 圆点 -->
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- </div>  -->
<!-- box的</div>放这个位置，不知为什么小球显示不了？ -->
</div>
 
<!-- jQuery代码 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
 
</script>
</body>
</html>

*{
    margin:0;
    padding:0;
}
.content{
    width: 1250px;
    height: 635px;
    text-align: center;
    border: 1px solid white;
    /*删除border圆点会偏移，所以颜色设置为白。
    原因不知为何*/
    margin: 0 auto;
    position: relative;
}
.content h2{
    margin: 50px auto;
}
 
.box{
    width: 1220px;
    height: 480px;
    background: #bbb;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.box div{
    width: 1200px;
    height: 460px;
    background-repeat:no-repeat;
    position: absolute;
    left: 10px;
    top: 10px;
    display: none;
}
.img1{
    background-image: url(../images/1.jpg);
}
.img2{
    background-image: url(../images/2.jpg);
}
.img3{
    background-image: url(../images/3.jpg);
}
.img4{
    background-image: url(../images/4.jpg);
}
.img5{
    background-image: url(../images/5.jpg);
}
 
.box .active{
    display: block;
}
.but{
    display: inline-block;
    height: 80px;
    width: 40px;
    position: absolute;
    left: 10px;
    top: 200px;
}
.pre2{
    background: url(../images/pre.png) center center no-repeat;
    left: auto;
    right: 10px;
}
.pre1{
    background: url(../images/pre2.png) center center no-repeat;
}
.but:hover{
    background-color:#333;
    opacity: 0.5;
    filter:alpha(opacity=50);
}
.dots{
    position: absolute;
    /*right: 0;
    bottom: 24px;*/
    right: 32px;
    bottom: 55px;
    text-align: right;
}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-right: 5px;
    cursor: pointer;
}
.dots span.active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background: #fff;
}