标签：
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<style>
.out{
position:relative;
margin:200px auto;
height:200px;
width:600px;
}
.show{
float:left;
width:400px;
height:200px;
overflow: hidden;
position:relative;
}
.out:hover .right,.out:hover .left{
display:block;
}
.cont{
left:0px;
top:0px;
position:absolute;
width:4000px;
}
.cont ul {
padding:0;
float:left;
}
.cont ul li{
text-align: center;
width:400px;
float:left;
height:200px;
}
.left{
border:1px blue solid;
background-color:red;
width:50px;
height:45px;
float:left;
display:none;
margin:90px -50px 0 0 ;
z-index:100;
position:absolute;
}
.right{
border:1px blue solid;
background-color:red;
position:absolute;
display:none;
width:50px;
height:45px;
float:left;
margin:90px 0 0 350px ;
z-index:100;
}
/***circle**/
.circle{
left:35px;
position:absolute;
top:300px;
padding-left: 0;
}
.circle .circle-current{
background-color: red;
}
.circle li{
cursor:pointer;
line-height: 30px;
text-align: center;
margin-left:20px;
float:left;
list-style-type:none;
width:30px;
height:30px;
border-radius:30px;
background-color:black;
}
</style>
</head>
<body>
<div class="out">
<div class="left" ><a href="javascript:void(0)">left</a></div>
<div class="show" >
<div class="cont">
<ul>
<li index = 0 style="background-color: blue;"><img src="picture/1.jpg" width="400px"></li>
<li index = 1 style="background-color:red;"><img src="picture/2.jpg" width="400px"></li>
<li index = 2 style="background-color:green;"><img src="picture/3.jpg" width="400px"></li>
<li index = 3 style="background-color:black;"><img src="picture/4.jpg" width="400px"></li>
<li index = 4 style="background-color:yellow;"><img src="picture/5.jpg" width="400px"></li>
<li index = 5 style="background-color:peru;"><img src="picture/6.jpg" width="400px"></li>
</ul>
</div>
</div>
<div class="right" ><a href="javascript:void(0)">right</a></div>
<ul class="circle">
<li class="circle-current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
$(function(){
$(".right").click(function(){
var a=$(".cont");
//不加stop()的话按快了的话过程动画会直接没了
a.stop().animate({left:$(".cont ul li").width()*-1},"slow",function(){
var first=a.find("li").first();
a.find("ul").append(first);
a.css("left","0px");
circle();
})
})
var x=true;
$(".left").click(function(){
if(x==true) {
x=false;
var a = $(".cont");
var last = a.find("li").last();
a.find("ul").prepend(last);
a.css("left", $(".cont ul li").width() * -1);
// setTimeout(function(){
// alert(123);
// },3000);
a.stop().animate({left: "0px"}, "slow", function () {
circle();
x = true;
});
}
})
var y=true;
$(".circle li").click(function(){
if(y==false){return 0;}
//不用circle();
$(".circle li").removeClass("circle-current");
$(this).addClass("circle-current");
//$(this).addClass("circle-current").siblings().removeClass("circle-current");//或者用这个；siblings()兄弟节点
var nextindex=$(this).index();
var nowindex=$(".cont li").first().attr("index");//关键！！并不能用index() 因为index()已经改动了
// alert(nowindex);
// alert(nextindex);
if(nextindex<nowindex)
{
var cha= nowindex-nextindex;
for(var i=0;nowindex-nextindex>i;i++)
{
var lastnode=$(".cont li").last();
$(".cont ul").prepend(lastnode);
// alert($(".cont li").first());
}
$(".cont").css("left", $(".cont ul li").width() * -(cha));
if(y==true)
{
y=false;
$(".cont").stop().animate({left: "0px"}, "slow", function () {
y = true;
});
}
}
if(nextindex>nowindex)
{
if(y==true) {
y=false;
var cha= nextindex-nowindex;
$(".cont").stop().animate({left: $(".cont ul li").width() * -(cha)}, "slow", function () {
for(var i=0;nextindex-nowindex>i;i++)
{
var firstnode=$(".cont li").first();
$(".cont ul").append(firstnode);
// alert($(".cont li").first());
}
$(".cont").css({left:0});
y = true;
});
}
}
})
//改变circle样式
function circle(){
var nownode=$(".cont li").first();
// alert(nownode.attr("index"));
var currentcircleIndex=nownode.attr("index");
$(".circle li").removeClass("circle-current");
$(".circle li").eq(currentcircleIndex).addClass("circle-current");
}
})
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/below/p/4704283.html
