jQuery 滚动插件

来源：互联网发布：什么是淘宝口令编辑：程序博客网时间：2024/04/29 17:05

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>