JQ 实现切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.con{
width: 400px;
height: 307px;
border: 5px solid #ccc;
margin: 100px auto;
position: relative;
}
.conIn{
width: 400px;
height: 307px;
-overflow: hidden;
position: relative;
}
.conIn ul{
width: 2000px;
position: absolute;
}
.conIn ul li{
float: left;
width: 400px;
height: 307px;
}
.prev,.next{
width: 52px;
height: 52px;
position: absolute;
top: 50%;
margin: -26px 0 0 0;
background: url(images/arr.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.prev{
left: -21px;
}
.next{
background-position: -52px 0;
right: -21px;
}
.con ol{
overflow: hidden;
width: 80px;
margin: 20px auto;
}
.con ol li{
width: 13px;
height: 13px;
background: url(images/00.png);
background-repeat: no-repeat;
background-position: 0 0;
float: left;
margin: 0 5px 0 0;
cursor: pointer;
}
.con ol .current{
background-position: 0 -26px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var olKey = 0;
var imgKey = 0;
var myFn = function(){
olKey++; //ol下得li小圆点的索引
if( olKey > 3 ){
olKey = 0;
}
$(".con ol li").eq(olKey).addClass("current").siblings().removeClass("current");
//找到底部的圆点 当前变成蓝色加上样式 并且把他的兄弟去除蓝色圆点样式
imgKey++; //ul下的li的图片
if( imgKey > 4 ){
imgKey = 1; //以为用户以为刚刚看到的是第一张图 其实是最后一张图 所以到达极值之后 我们想让用户看到的是第二张图（索引值1） 然后等待下次滑动 要是直接不插入一张就会没有效果
$(".con ul").css("left","0px");
}
var move = imgKey * -400; //获取需要移动的距离
$(".con ul").stop().animate( {"left": move + "px"}, 500 );
//停止当前的运动并且把它移动到指定位置
}
var timer = null;
timer = setInterval( myFn,2000 ); //开始持续移动 2秒执行一次
$(".con").hover(function(){ //鼠标滑过整体时
clearInterval(timer); //鼠标在上边关闭定时器
},function(){
timer = setInterval( myFn,2000 ); //鼠标移开时开始定时器
});
var myLi = $(".con ul li").eq(0).clone(true);
var myTag = $(myLi); //克隆第一个元素
$(".con ul").append(myTag);
//向下的点击事件
$(".next").on("click",function(){ //点击下一次的时候执行
myFn();
});
//向上的点击事件
$(".prev").on("click",function(){
olKey--; //ol下得li小圆点的索引 当前值减1
if( olKey < 0 ){
olKey = 3;
}
$(".con ol li").eq(olKey).addClass("current").siblings().removeClass("current");
//找到底部的圆点 当前变成蓝色加上样式 并且把他的兄弟去除蓝色圆点样式
imgKey--;
if( imgKey < 0 ){
imgKey = 3;
$(".con ul").css("left",(imgKey+1)*-400 + "px");
//图片索引归零的时负最大值并且图片位置也调整到最右边
}
var move = imgKey * -400;
$(".con ul").stop().animate({"left":move + "px"},500);
//点击时停止当前运动 并且移动到指定的位置
});
//ol下的li的点击事件
$(".con ol li").on("click",function(){
$(this).addClass("current").siblings().removeClass("current"); //ol下的li当前位置添加蓝色背景样式
//ul也要跟着一起移动
var move = $(this).index() * -400;
$(".con ul").stop().animate( {"left":move + "px"},500 );
//把全局变量olKey和imgKey都变为当前的索引值
olKey = $(this).index();
imgKey = $(this).index();
});
});
</script>
</head>
<body>
<div class="con">
<div class="conIn">
<ul>
<li><img src="images/01.jpg"></li>
<li><img src="images/02.jpg"></li>
<li><img src="images/03.jpg"></li>
<li><img src="images/04.jpg"></li>
</ul>
</div>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:void(0);" class="prev"></a>
<a href="javascript:void(0);" class="next"></a>
</div>
</body>
</html>
