Jquery左右无缝图片滚动插件（原创）

zhw.scroll-1.0.js

/*
功能：Jquery无缝滚动插件zhw.scroll-1.0.js
作者：leo
注意：暂只支持div下ul li的滚动
交流：xandchd_kane@163.com
*/
jQuery.extend({
    Scroll:  function (settings) {
         // 初始化参数
         var  config  =  $.extend({
            stepWidth:  100 ,          //  滚动步长
            waitTime:  4000 ,          //  间歇时间
            animateTime:  500 ,        //  滚动效果时间,理论上应该比间歇时间短
            inner:  "" ,               //  滚动对象
            left:  "" ,                //  左点击对象
            right:  ""                 //  右点击对象
        }, settings);

         var  flag  =  setInterval(AutoScroll, parseInt(config.waitTime));
         // 左滚
        $(config.left).click( function () { AutoScroll(); });
         // 右滚
        $(config.right).click( function () { RightScroll(); });
         // 悬停
        $( ""   +  config.left  +   " , "   +  config.right  +   " , "   +  config.inner  +   "" ).hover( function () { clearInterval(flag) },  function () {
            flag  =  setInterval(AutoScroll, parseInt(config.waitTime));
        });
         function  AutoScroll() {
             var  marginLeft  =  $(config.inner).css( " margin-left " );
            $(config.inner).stop().animate({  " margin-left " : parseInt(marginLeft)  -  config.stepWidth }, config.animateTime,  function () {
                 var  n  =  $( " li " ).toArray();  // 转换为对象数组
                 var  k  =  $.grep(n,  function (i, j) {  return  j  >   0 ; });  // 筛选
                 var  temp  =  $.grep(n,  function (i, j) {  return  j  >   0 ; },  true );  // 筛选
                $(config.inner).children( " ul " ).html( "" );  // 清空
                $(k).each( function (i, j) {
                    $(config.inner).children( " ul " ).append(j);  // 重新拼装内容
                });
                $(config.inner).children( " ul " ).append(temp);  // 拼装被筛选出去的对象
                $(config.inner).css( " margin-left " ,  0 );  // 初始化marginleft
            });
        }
         function  RightScroll() {
             // 向右需要先拼装再移动
             var  marginLeft  =  $(config.inner).css( " margin-left " );
             var  n  =  $( " li " ).toArray();  // 转换为对象数组
             var  k  =  $.grep(n,  function (i, j) {  return  j  <  n.length  -   1 ; });  // 筛选
             var  temp  =  $.grep(n,  function (i, j) {  return  j  >  n.length  -   1 ; },  true );  // 筛选
            $(config.inner).children( " ul " ).html( "" ).append(temp);  // 拼装被筛选出去的对象
            $(k).each( function (i, j) {
                $(config.inner).children( " ul " ).append(j);  // 重新拼装内容
            });
            $(config.inner).css( " margin-left " ,  - config.stepWidth);
             //
            $(config.inner).stop().animate({  " margin-left " : parseInt(marginLeft) }, config.animateTime);
        }
    }
});

 

 

 

前台代码

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
     < style  type ="text/css" >
        body { font-size : 12px }
        .left,.right { width : 50px ;  height : 40px ;  line-height : 40px ;  float : left ;  text-align : center ;  cursor : pointer }         
        #scroll { width : 400px ;  height : 40px ;  overflow : hidden ;  float : left }
        #inner { width : 800px ;  height : 40px ; }
        ul { padding : 0 ;  margin : 0 auto }
        #inner ul { width : 800px ;  list-style : none ; height : 40px }  
        #inner ul li { width : 100px ;  float : left ;  list-style : none ;  line-height : 40px ;  text-align : center }         
        #page a {  margin : 0px 10px ;  text-decoration : none }
     </ style >
     < script  src ="javascript/jquery-1.4.2.min.js"  type ="text/javascript" ></ script >     
     < script  src ="javascript/zhw.Scroll.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
        $( function () {
            $.Scroll({
                waitTime:  3000 ,
                inner:  " #inner " ,
                left:  " .left " ,
                right:  " .right "
            });
        })
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < div  class ="left" >< <</div >
         < div  id ="scroll" >             
             < div  id ="inner" >
                 < ul >
                     < li > 滚动练习—1 </ li >
                     < li > 滚动练习—2 </ li >
                     < li > 滚动练习—3 </ li >
                     < li > 滚动练习—4 </ li >
                     < li > 滚动练习—5 </ li >
                     < li > 滚动练习—6 </ li >
                     < li > 滚动练习—7 </ li >
                     < li > 滚动练习—8 </ li >
                 </ ul >
             </ div >             
         </ div >
         < div  class ="right" > >> </ div >
         </ form >
</ body >
</ html >

 

这个插件是根据自己项目需要写的，可能不满足部分朋友的需求，欢迎交流。

转载于:https://www.cnblogs.com/easyleo/archive/2011/04/08/2009275.html