Xslider演示8种滚动效果

最新推荐文章于 2021-11-11 09:01:57 发布

weixin_34198453

最新推荐文章于 2021-11-11 09:01:57 发布

阅读量137

点赞数

文章标签： javascript ViewUI

Xslider演示8种滚动效果包括：

一、左右切换：每次移动固定距离

二、左右切换：最后一个显示在最右侧

三、自动切换

四、循环切换

五、文本的上下滚动

六、上下切换

七、上下自动循环切换

在线预览

下载地址

在线实例

 
         <h2>七、上下自动循环切换</h2> 
        
         <div  
         class 
         = 
         "newslistwraper" 
         > 
        
         <div  
         class 
         = 
         "newslist" 
         > 
        
         <ul> 
        
         <li>日本通过防卫大纲 明确提出加强钓鱼岛等防卫</li> 
        
         <li>菲律宾称不会对人质事件中香港遇难者作出赔偿</li> 
        
         <li>11月份全国楼市再度量价齐涨 可能引发第三轮调控</li> 
        
         <li>山西巡警队长成黑老大敛财数亿 27套房被查封</li> 
        
         </ul> 
        
         </div> 
        
         <a  
         class 
         = 
         "abtn aleft"  
         href= 
         "#up" 
         >上移</a> 
        
         <a  
         class 
         = 
         "abtn aright"  
         href= 
         "#down" 
         >下移</a> 
        
         </div> 
        
         <script type= 
         "text/javascript"  
         src= 
         "/api/jq/5733e37510366/js/jquery-1.4.1.min.js" 
         ></script> 
        
         <script type= 
         "text/javascript"  
         src= 
         "/api/jq/5733e37510366/js/Xslider.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         > 
        
         $( 
         function 
         () { 
        
         //一、左右切换：每次移动固定距离; 
        
         $( 
         ".productshow:eq(0)" 
         ).Xslider({ 
        
         unitdisplayed: 3, 
        
         numtoMove: 3, 
        
         scrollobjSize: Math.ceil($( 
         ".productshow:eq(0)" 
         ).find( 
         "li" 
         ).length / 3) * 486 
        
         }); 
        
         //二、左右切换：最后一个显示在最右侧; 
        
         $( 
         ".productshow:eq(1)" 
         ).Xslider({ 
        
         unitdisplayed: 3, 
        
         numtoMove: 3 
        
         }); 
        
         //三、自动切换; 
        
         $( 
         ".productshow:eq(2)" 
         ).Xslider({ 
        
         unitdisplayed: 3, 
        
         numtoMove: 3, 
        
         autoscroll: 2000   
         //自动移动间隔时间     默认null不自动移动; 
        
         }); 
        
         //四、循环切换; 
        
         $( 
         ".productshow:eq(3)" 
         ).Xslider({ 
        
         unitdisplayed: 3, 
        
         numtoMove: 2, 
        
         loop:  
         "cycle" 
        
         }); 
        
         //五、文本的上下滚动; 
        
         $( 
         ".vscroll" 
         ).Xslider({ 
         //.productshow是要移动对象的外框; 
        
         unitdisplayed: 6,  
         //可视的单位个数   必需项; 
        
         numtoMove: 3,  
         //要移动的单位个数    必需项; 
        
         viewedSize: 120,  
         //可视宽度或高度    默认查找要移动对象外层的宽或高度; 
        
         scrollobj:  
         ".vscrollobj" 
         ,  
         //要移动的对象     默认查找productshow下的ul; 
        
         unitlen: 20,  
         //移动的单位宽或高度     默认查找li的尺寸; 
        
         scrollobjSize: $( 
         ".vscrollobj" 
         ).height(),  
         //移动最长宽或高（要移动对象的宽度或高度）   默认由li个数乘以unitlen所得的积; 
        
         dir:  
         "V" 
         //水平移动还是垂直移动，默认H为水平移动，传入V则表示垂直移动; 
        
         }); 
        
         //六、上下切换; 
        
         $( 
         ".videolistwraper" 
         ).Xslider({ 
         //.productshow是要移动对象的外框; 
        
         unitdisplayed: 2,  
         //可视的单位个数   必需项; 
        
         numtoMove: 1,  
         //要移动的单位个数    必需项; 
        
         //loop:"cycle", 
        
         dir:  
         "V" 
         //水平移动还是垂直移动，默认H为水平移动，传入V则表示垂直移动; 
        
         }); 
        
         //七、上下自动循环切换; 
        
         $( 
         ".newslistwraper" 
         ).Xslider({ 
        
         unitdisplayed: 1, 
        
         numtoMove: 1, 
        
         loop:  
         "cycle" 
         , 
        
         dir:  
         "V" 
         , 
        
         autoscroll: 2500, 
        
         speed: 300 
        
         }); 
        
         $( 
         "a" 
         ).focus( 
         function 
         () { 
        
         this 
         .blur(); 
        
         }); 
        
         }) 
        
         </script>