原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。
经测试代码如下：
<!DOCTYPE html><html><head><Meta charset="utf-8" /><Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/center.js"></script></head><style type="text/css">.img_content {width: 600px;margin: 0;padding: 0;height: 200px;position: absolute;overflow: hidden;}.img_content ul {list-style: none;margin: 0;padding: 0;position: absolute;width: 1000px;}.img_content ul li {float: left;margin: 0;padding: 0;}.img_content ul li img {width: 200px; height: 200px;}button {width: 100px;height: 40px;border-radius: 5px;background: cornflowerblue;color: white;border: 0;}</style><body><div class="img_content"><ul><li><img src="img/1.jpg" /> </li><li><img src="img/2.jpg" /> </li><li><img src="img/3.jpg" /> </li><li><img src="img/4.jpg" /> </li><li><img src="img/5.jpg" /> </li><li><img src="img/6.jpg" /> </li><li><img src="img/7.jpg" /> </li><li><img src="img/8.jpg" /> </li></ul></div><button id="left">左</button><button id="right">右</button><button id="auto">自动切换</button><button id="stop">取消自动切换</button><script>centerParent($('.img_content')[0]);$('#left').click(function() {scrollLeft();});$('#right').click(function() {scrollRight();});/*向左滑动*/function scrollLeft() {/*先向左移动一个图片的宽度 移动后在末尾追加第一个元素 然后将第一个元素移除 */$('ul').animate({left: -200},200,function() {$('ul').append($('ul li:first').clone());$('ul li:first').remove();}); /*将left值置为0*/$('ul').animate({left: 0},0);}/*向右滑动*/function scrollRight() {/*先向右移动一个图片的宽度 移动后把最后一个元素插入到头部 然后移除最后一个元素*/$('ul').animate({left: -200},function() {$('ul').prepend($('ul li:last').clone());$('ul li:last').remove();}); /*完成上面动作后将left置为0*/$('ul').animate({left: 0},200);} var auto;$('#auto').click(function() {auto = setInterval(scrollLeft,2000);});$('#stop').click(function() {clearInterval(auto);});</script></body></html><!-- 来自 编程之家 jb51.cc （jb51.cc）-->
