<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播左右</title>
<script src="js/jquery-1.7.1.js"></script>
<style>
.list{
250px;
height: 47px;
overflow: hidden;
border: 1px solid #d74147;
position: relative;
}
.list ul{
padding-top: 0 !important;
padding-left: 0 !important;
margin-top: 0 !important;
position: absolute;
top: 0;
500px;
}
.list ul li{
50px;
line-height: 30px;
list-style: none;
text-align: center;
float: left;
}
</style>
<script type="text/javascript">
$(function(){
//class为lis给一个变量名叫$ul
var $ul = $('.lis');
//在ul下查找所有的li，获取li的宽度
var $liWidth = $ul.find('li').css('width');
//
var direction = 'left';
//按钮class为left的点击事件，并且direction=left,下面反之
$('.left').on('click',function(){
direction = 'left';
});
$('.right').on('click',function(){
direction = 'right';
});
//给定时器setInterval函数申明一个变量为leftInterval
var leftInterval = setInterval(function(){
//为什么放这边(如果放在定时器外面,只能往一个方向【left】动，因为定时器在IF里面)
//如果direction=left
if(direction == 'left'){
//查找ul下得li的第一个li,并且声明变量为$liFirst
var $liFirst = $('.lis').find('li').first();
//ul向左运动的长度为li的宽度，速度是slow
$ul.animate({left: '-' + $liWidth}, 'slow', function(){
//移动好后，每次都把第一个的插入到ul得最后
$liFirst.appendTo($ul);
//因为每次第一个往左移动，后面的第一个再往左移动，如果不把他
$ul.css('left', 0);
});
}
else{
var $liLast = $('.lis').find('li').last();
$liLast.prependTo($ul);
$ul.css('left', '-' + $liWidth);
$ul.animate({left: 0}, 'slow');
}
}, 1000);
// clearInterval(leftInterval());
//1. 动画 left 负值
//2. 头移到尾
//3. left 从负值设为0
//1. left 从0设为负值
//2. 尾移到投
//3. 动画 left 0
});
</script>
</head>
<body>
<div class="list">
<ul class="lis">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
</div>
<input type="button" value="left" class="left" />
<input type="button" value="right" class="right" />
</body>
</html>