$(document).ready(function() { var $wrapper = $('#scroller a img'); var animator = function(img) { img.animate({left: -950}, 5000, function() { img.css({left: 450}); animator($(this)); }); } animator($wrapper); $wrapper.hover(function() { // stop()方法停止当前动画 $wrapper.stop(); }, function() { animator($wrapper); }) });
<div id="scroller"> <div id="images"> <a href="#"><img src="http://images.cnitblog.com/i/429080/201404/191316375105721.jpg" alt="" width="150" height="150" /></a> <a href="#"><img src="http://images.cnitblog.com/i/429080/201404/191316590418775.jpg" alt="" width="150" height="150"/></a> <a href="#"><img src="http://images.cnitblog.com/i/429080/201404/191317072443869.jpg" alt="" width="150" height="150" /></a> <a href="#"><img src="http://images.cnitblog.com/i/429080/201404/191317187606119.jpg" alt="" width="150" height="150" /></a> <a href="#"><img src="http://images.cnitblog.com/i/429080/201404/191317256198955.jpg" alt="" width="150" height="150"/></a> <a href="#"><img src="http://images.cnitblog.com/i/429080/201404/191317413537514.jpg" alt="" width="150" height="150" /></a> </div> </div>
/*只能容纳显示一张图片*/ #scroller{ margin: auto; height: 150px; width: 460px; /*设置 position为relative,让图片移动以scroller的左上角为基点*/ position: relative; /*超出范围的隐藏*/ overflow: hidden; /*设置边框样式*/ border: 1px saddlebrown dashed; } #images{ width: 950px; } #images a img{ border: 0; /*图片要实现动画效果,必须要设置此CSS属性*/ position: relative; }