点击按钮左右滚动

* {margin: 0; padding: 0;}
        img {display: block; border: none;}
        ul, li {list-style: none;}
        a, a:hover, a:active, a:target {text-decoration: none; color: #000;}
        .outer {position: relative;margin: 0 auto;width: 1000px;height: 145px;overflow: hidden;box-shadow: 3px 3px 10px 0 #ccc;}
        .inner {position: absolute;top: 0;left: 0;width: 5000px;}
        .inner li {float: left;padding: 5px;}
        .inner li img{width: 209px; height: 125px;}
        .outer a {position: absolute;top: 50%;margin-top: -22.5px;width: 30px;height: 45px;background: url("img/pre.png") no-repeat;opacity: 0.3;filter: alpha(opacity=30);}
        .outer a:hover {opacity: 1; filter: alpha(opacity=100);}
        .outer a.btnLeft {left: 20px;}
        .outer a.btnRight {right: 20px; background-position: -50px 0;}
        .box{width:880px; overflow: hidden; height: 240px; position: absolute; left:60px;}

<div class="outer">
    <div class="box">
        <ul class="inner" id="inner">
            <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>
            <li><img src="img/1.jpg"></li>
        </ul>
    </div>
    <a class="btnLeft"></a>
    <a class="btnRight"></a>
</div>

<script charset="utf-8" type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script charset="utf-8" type="text/javascript">
    (function () {
        var step = 0, count = $(".inner li").length-4;
        var $inner = $("#inner");
        function autoMove() {
            step++;
            if (step > count) {
                $inner.css("left", 0);
                step = 0;
            }
            $inner.stop().animate({left: -step * 219}, 500);
        }

        //->左右切换
        $(".outer").on("click","a",function() {
            if ($(this).index() == 1) {   //左
                step--;
                if (step < 0) {
                    $inner.css("left", -count * 219);
                    step = count - 1;
                }
                $inner.stop().animate({left: -step * 219}, 500);
            } else {   //右
                autoMove();
            }
        });
    })();
</script>

js封装方法可以一个页面多次使用，只需传入对应id.

//图片滚动
roll("#inner");
roll("#inner2");

function roll(oneRoll){
var step = 0;
var count = $(""+oneRoll+" li").length;
var $inner = $(""+oneRoll+"");
var liWidth = $(""+oneRoll+" li").outerWidth();
var ulWidth = liWidth * count + 'px';

//算出整个ul撑开的宽度
$inner.css("left", "0");
$(""+oneRoll+"").css({
"width": ulWidth
});

$inner.parent().siblings().filter(".btnLeft").hide();
if(count <= 3) {
$inner.parent().siblings().filter(".btnRight").hide();
}

//点左按钮
$inner.parent().siblings().filter(".btnLeft").off("click").on("click", function() {
$inner.parent().siblings().filter(".btnRight").show();
step -= 1;
$inner.stop().animate({
left: -step * liWidth
}, 500);
if(step < 1) {
$(this).hide();
}
})
//点右按钮
$inner.parent().siblings().filter(".btnRight").off("click").on("click", function() {
step += 1;
var myStep = step - 1;
if(myStep == count-3) {
$inner.parent().siblings().filter(".btnRight").hide();
}
$inner.stop().animate({
left: -step * liWidth
}, 500);
$inner.parent().siblings().filter(".btnLeft").show();
})
}