html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<div id="digs">
<div id="igs">
<div class="ig"><img src="img/1.jpg"></div>
<div class="ig"><img src="img/2.jpg"></div>
<div class="ig"><img src="img/3.jpg"></div>
<div class="ig"><img src="img/4.jpg"></div>
<div class="ig"><img src="img/5.jpg"></div>
<div class="ig"><img src="img/1.jpg"></div>
</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>
<div class="btn btn1"><</div>
<div class="btn btn2">></div>
</div>
</body>
</html>
css:
*{
padding:0px;
margin:0px;
}
#digs{
520px;
height:280px;
position:absolute;
top:50%;
margin-top:-140px;
left:50%;
margin-left:-260px;
overflow:hidden;/*多余的隐藏*/
}
#igs{
5000px;
position:absolute;
top:0px;
left:0px;
}
.ig{
float:left;
}
#tabs{
position:absolute;
left:50%;
margin-left:-80px;
bottom:15px;
200px;
height:30px;
}
.tab{
30px;
height:30px;
background-color:#808080;
float:left;
color:#fff;
margin-left:10px;
text-align:center;
line-height:30px;
border-radius:100%;
cursor:pointer;
}
.btn{
30px;
height:50px;
background:rgba(0,0,0,.5);
top:50%;
margin-top:-25px;
position:absolute;
text-align:center;
line-height:50px;
font-size:40px;
cursor:pointer;
color:#fff;
}
.btn1{
left:0px;
}
.btn2{
right:0px;
}
.bg{
background-color:red;
}
js:
/// <reference path="jquery-1.10.2.min.js" />
var i = 0;
var time;
$(function () {
start();
$(".tab").hover(function () {
clearInterval(time);
i = $(this).index();
Move();
}, function () {
start();
});
//点击的左箭头
$(".btn1").click(function () {
clearInterval(time);
i--;
if (i == -1) {
$("#igs").css("left", -520 * 5);
i = 4;
}
Move();
start();
});
//点击右箭头
$(".btn2").click(function () {
clearInterval(time);
i++;
Move();
start();
});
});
function Move() {
if (i < 5) {
$("#igs").animate({ "left": -520 * i }, 1000);
} else {
$("#igs").animate({ "left": -520 * i }, 1000, function () {
$(this).css("left", "0px");
});
i = 0;
}
$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}
function start() {
time = setInterval(function () {
i++;
Move();
}, 2000);
}