jQuery图片滚动效果点击左右按钮图片可切换，自动切换

‌ 本文介绍如何使用jQuery制作图片滚动效果点击左右按钮图片可切换，带自动切换效果。可自由设置默认的滚动方向，滚动的时间以及是否自动滚动。

主要js代码与说明

<script type="text/javascript">
    var flag = "left"; //默认滚动方向

    //滚动方法
    function DY_scroll(wraper, prev, next, img, speed, or) {
        var wraper = $(wraper);
        var prev = $(prev);
        var next = $(next);
        var img = $(img).find('ul');
        var w = img.find('li').outerWidth(true);
        var s = speed;
        next.click(function () {
            img.animate({ 'margin-left': -w }, function () {
                img.find('li').eq(0).appendTo(img);
                img.css({ 'margin-left': 0 });
            });
            flag = "left";
        });
        prev.click(function () {
            img.find('li:last').prependTo(img);
            img.css({ 'margin-left': -w });
            img.animate({ 'margin-left': 0 });
            flag = "right";
        });
        if (or == true) {
            ad = setInterval(function () { flag == "left" ? next.click() : prev.click() }, s * 1000);
            wraper.hover(function () { clearInterval(ad); }, function () { ad = setInterval(function () { flag == "left" ? next.click() : prev.click() }, s * 1000); });
        }
    }

    DY_scroll('.gundong', '.prev', '.next', '.gundong-list', 3, true); // true为自动播放，不加此参数或false就默认不自动 
</script>