jQuery 滚动插件

jQuery.extend({
    Scroll: function (settings) {
        //初始化参数
        var config = $.extend({
            wrap:"",
            stepWidth: 75,          // 滚动步长
            waitTime: 2000,         // 间歇时间
            inner: "",              // 滚动对象
            animateTime: 300,       // 滚动效果时间,理论上应该比间歇时间短
            moving: ""              // 需要清除的动画
        }, settings);
        config.wrap.hover(function () {
            clearInterval(config.moving); //当鼠标在滚动区域中时,停止滚动
        }, function () {
            config.moving = setInterval(function () {
                var field = config.wrap.find(config.inner+':first'); 
                field.animate({ marginLeft: -config.stepWidth + 'px' }, config.animateTime, function () {//通过取负margin值,隐藏第一行
                    field.css('marginLeft', 0).appendTo(config.wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
                })
            }, config.waitTime)//滚动间隔时间取决于waitTime
        }).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动  
    }
});

html部分

<div class="scroll">
        <ul>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/000/875/132//small/1514216.JPG">
            </li>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/2010/1111/small/20101111174818351.JPG">
            </li>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/2012/0306/small/20120306192902445.JPG">
            </li>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/2011/1018/small/20111018180734403.JPG">
            </li>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/2011/0520/small/20110520181611395.jpg">
            </li>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/2012/0208/small/20120208162633875.JPG">
            </li>
            <li>
                <img src="http://photo.iautos.cn/carupload/photo/2010/1210/small/20101210175206408.JPG">
            </li>
        </ul>
    </div>

<style>
        .scroll
        {
            overflow: auto;
        }
        
        .scroll ul
        {
            width: 668px;
            overflow: hidden;
            margin: 0px;
            padding: 0px 0px;
            height: 117px;
        }
        
        .scroll li
        {
            width: 25%;
            float: left;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        .scroll li img
        {
            width: 150px;
            height: 112px;
            border: 0px;
        }
          
        
    </style>

<script>
        $("document").ready(function () {
            $.Scroll({ wrap: $('.scroll ul'), inner: 'li' });
        })
    </script>