这几天正在自学中。。。
今天发现一个顺序的问题,之前自学的时候没有看过谁讲这个问题。
这个demo是关于轮播图的
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="carouselfigure.css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="carouselfigure.js"></script>
</head>
<body>
<div id="igs">
<div class="ig"><img src="../image/1.jpg"></div>
<div class="ig"><img src="../image/2.jpg"></div>
<div class="ig"><img src="../image/3.jpg"></div>
<div class="ig"><img src="../image/4.jpg"></div>
<div class="ig"><img src="../image/5.jpg"></div>
<div class="ig"><img src="../image/6.jpg"></div>
</div>
<div class="btn btn1">
<
</div>
<div class="btn btn2">
>
</div>
<div id="tabs">
<div class="tab bg">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.ig{
position: absolute;
}
.btn{
position:absolute;
width:60px;
height:90px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:24px;
text-align: center;
line-height:90px;
top:155px;
cursor:pointer;
}
.btn2{
left:840px;
}
#tabs{
position:absolute;
top:360px;
left:330px;
}
.tab{
width:30px;
height:30px;
background:#5388e8;
color:#fff;
text-align:center;
line-height:30px;
float:left;
margin-right:10px;
border-radius:100%;
cursor:pointer;
}
.bg{
background: #ff0000;
}
JS
var i = 0;
var timer;
$(function () {
$('.ig').eq(0).show().siblings().hide();
showTime();
$('.tab').hover(function () {
i = $(this).index();
show();
clearInterval(timer);
}, function () {
showTime();
});
$('.btn1').click(function () {
clearInterval(timer);
if(i==0){
i=6;
}
i--;
show();
showTime();
});
$('.btn2').click(function () {
clearInterval(timer);
if(i==5){
i=-1;
}
i++;
show();
showTime();
});
});
function show() {
$('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);
$('.tab').eq(i).addClass('bg').siblings().removeClass('bg');
}
function showTime() {
timer = setInterval(function () {
i++;
if (i == 6) {
i = 0;
}
show();
}, 4000);
}
注意
原来我把CSS中的".bg"写到了“.btn”下面,然后红色的样式不会出现,只有加到“.tab”下面才显示
原来错误的CSS写法
* {
margin: 0;
padding: 0;
}
.ig{
position: absolute;
}
.btn{
position:absolute;
width:60px;
height:90px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:24px;
text-align: center;
line-height:90px;
top:155px;
cursor:pointer;
}
.bg{
background: #ff0000;
}
.btn2{
left:840px;
}
#tabs{
position:absolute;
top:360px;
left:330px;
}
.tab{
width:30px;
height:30px;
background:#5388e8;
color:#fff;
text-align:center;
line-height:30px;
float:left;
margin-right:10px;
border-radius:100%;
cursor:pointer;
}
这是为什么呢?