“+=”+offset，原基础上加offset，可以多次点击累加
$().is(":animated")是判断元素是否处于动画状态
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#menu{width:600px;
height:400px;
border:2px solid red;
margin:0 auto;
position:relative;}
#list{width:4200px;
height:400px;
position:absolute;}
#list li{float:left;
list-style-type:none;}
.btm{z-index:2;
width:50px;
height:70px;
line-height:70px;
color:white;
font-size:50px;
text-align:center;
background:RGBA(0,0,0,.3);
position:absolute;
top:150px;
}
#prev{left:20px;}
#next{right:20px;}
#buttom{width:100px;
height:10px;
margin:0 auto;
position:absolute;
bottom:20px;
left:250px;
z-index:2;}
#buttom li{width:10px;
height:10px;
border:1px solid red;
border-radius:5px;
margin-left:7px;
float:left;
list-style-type:none;
}
.oli{background:red;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.1.10.2.js"></script>
<script>
$(function(){
var menu=$("#menu"),
menus=$("#menu li"),
list=$("#list"),
prev=$("#prev"),
next=$("#next"),
buttoms=$("#buttom li"),
timed,
index=0;
prev.click(function(){
if(list.is(":animated"))
{
return;
}
animate(600);
if(index==0)
{
index=4;
}
else
{
index-=1;
}
Buttom();
});
next.click(function(){
if(list.is(":animated"))
{
return;
}
if(index==4)
{
index=0;
}
else
{
index+=1;
}
Buttom();
animate(-600);
});
//图片的移动和动画移动
function animate(offset)
{ flag=false;
var newleft=parseInt(list.css("left"))+offset;
//在JQ中"+="表示通过不断和自身相加，offset="+=offset"
//这里的offset就是可以变化的，每次都会相加自身的本来的值
list.animate({"left":"+="+offset},300,function(){
if(newleft>-600)
{
list.css("left",-3000);
}
if(newleft<-3000)
{
list.css("left",-600);
}
});
}
//小圆点的移动
function Buttom()
{
buttoms.eq(index).addClass("oli").siblings().removeClass("oli");
}
//小圆点的点击移动
buttoms.click(function(){
var newindex=$(this).index(); //寻找点击圆点的下标
var speed=-600*(newindex-index);
index=newindex;
animate(speed);
Buttom();
});
//图片的自动移动
function play()
{
timed=setInterval(function(){next.click()},2000); //JQ中和JS的用法一致
}
play();
//图片的暂停
menus.mouseover(function(){
clearInterval(timed);
});
menus.mouseout(function(){
play();
});
})
</script>
</head>
<body>
<div id="menu">
<ul id="list" style="left:-600px">
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"/></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"/></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg"/></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg"/></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg"/></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"/></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"/></li>
</ul>
<div id="prev" class="btm"><</div>
<div id="next" class="btm">></div>
<ul id="buttom">
<li class="oli"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
