<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery版</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 700px;
height: 500px;
overflow: hidden;
position: relative;
}
.icon {
position: absolute;
bottom: 10px;
left: 50%;
}
.circle {
width: 8px;
height: 8px;
float: left;
margin: 5px;
border: 1px solid yellow;
border-radius: 4px;
}
#middle {
position: absolute;
width: 9999px;
left: 0;
height: 500px;
transition: all 1s;
}
#middle img {
float: left;
height: 100%;
width: 700px;
}
.selected{
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<div id="middle">
<img src="img/a84.jpg" alt="" />
<img src="img/a91.jpg" alt="" />
<img src="img/a89.jpg" alt="" />
<img src="img/a88.jpg" alt="" />
</div>
<div class="icon">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>
<div id="nav">
<input type="button" name="btn1" id="last" value="上一张" />
<input type="button" name="btn2" id="next" value="下一张" />
</div>
<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var currentIndex = 0;
$("span").eq(0).addClass("selected");
$("#last").on("click",function(){
if (currentIndex == 0) {
currentIndex = 4;
}
currentIndex--;
$("#middle").css({
left:-currentIndex * 700,
})
$("span").removeClass("selected");
$("span").eq(currentIndex).addClass("selected");
})
$("#next").on("click",function(){
if (currentIndex == 3) {
currentIndex = -1;
}
currentIndex++;
$("#middle").css({
left:-currentIndex * 700,
})
$("span").removeClass("selected");
$("span").eq(currentIndex).addClass("selected");
})
$("span").on("click",function(){
currentIndex = $(this).index();
$("span").removeClass("selected");
$(this).addClass("selected");
$("#middle").css({
left:-currentIndex * 700,
})
})
})
</script>
</body>
</html>
4460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
