/slider

a variety of carousels ever used

Primary LanguageHTML

slider

查看demo:

<title></title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} li{list-style: none; float: left;height: 200px;width: 200px;background: gray;color: red} .box{height: 200px;width: 600px;overflow: hidden; margin: 100px auto;position: relative;} #left,#right{position: absolute;height: 30px; width: 30px;background: #eee;color: red} #left{top: 40%; left: 0;} #right{top: 40%;right: 0;} ul{position: absolute;width: 1000px} </style>
  • 1
  • 2
  • 3
  • 4
  • 5
上
下
<script type="text/javascript"> function move(){ $('ul').animate({ left: '-200px'}, 1000, function() { $('ul').css('left',0); $('ul').find('li').eq(0).appendTo('ul'); }); } $('#right').click(function(){ if($('ul')[0].offsetLeft==0){ move(); } }) $('#left').click(function(){ if($('ul')[0].offsetLeft==0){ $('ul').find('li:last-child').prependTo('ul'); $('ul').css('left','-200px'); $('ul').animate({ left: 0 },1000); } }) var t=setInterval(move,2000); $('.box').hover(function() { clearInterval(t); }, function() { t=setInterval(move,2000); }); </script>