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

小彬__ 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;
}

收起回答