<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<title>左右点击幻灯片</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{ list-style: none;}
.wrapper{ 300px;height: 200px; margin:100px auto;overflow: hidden;border: 2px solid #ccc;position: relative;}
.scroll{ 205px;margin: 0 auto; overflow: hidden;}
.scroll li{float: left; margin: 5px; height:160px; font-size:60px; text-align:center; line-height:100px; font-weight:800; background:#FF3F00; color:#fff; 200px;}
.prev,.next{ 30px;height: 30px;background: #daa520;color: #fff;cursor: pointer;position: absolute;top:80px; text-align: center;line-height: 30px;}
.next{ right: 0;}
</style>
</head>
<script>
$(function(){
var oScroll=$('.scroll>ul'),oLi=oScroll.find('li'),oLen=oLi.length,oPrev=$('.prev'),oNext=$('.next'),oWidth=oLi.eq(0).outerWidth(true),iNow= 1,oCur=$('.count>em'),oCount=$('.count>i'),iTimer=null;
oScroll.width(oWidth*oLen);
oCount.html(oLen);
function count(){
oCur.html(iNow);
}
function Prev(){
oScroll.css({marginLeft:-oWidth+'px'}).find('li:last').prependTo(oScroll);
oScroll.stop(true,true).animate({marginLeft:0+'px'},600);
iNow=iNow>1?iNow-1:oLen;
count(iNow);
}
function Next(){
oScroll.stop(true,true).animate({marginLeft:-oWidth+'px'},600,function(){
oScroll.css({marginLeft:0}).find('li:first').appendTo(oScroll);
})
iNow=iNow<oLen?iNow+1:1;
count(iNow);
}
oPrev.bind('click',Prev);
oNext.bind('click',Next);
iTimer=setInterval(Next,3000);
$('.wrapper').hover(function(){
clearInterval(iTimer);
},function(){
iTimer=setInterval(Next,3000);
})
})
</script>
<body>
<div class="wrapper">
<span class="prev">《</span>
<span class="next">》</span>
<div class="scroll">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="count"><em>1</em>/<i>0</i></div>
</div>
</body>
</html>