小小小小红红红的gravatar头像
小小小小红红红 2016-05-11 14:29:19

jquery如何实现多行多列图片自动滚动特效?

求思路,求伪码

所有回答列表(1)
小夕酱的gravatar头像
小夕酱  LV13 2016年5月12日

轮播可以实现的。。。。

我封装的个JS。你看看能用么。

-----------------------------------------------------------------------------------------------------

function pictures(divBox ,aid){
        var length,     
    currentIndex = 0,   
    interval,   
    hasStarted = false, //是否已经开始轮播  
    t = 3000; //轮播时间间隔   
     length = divBox.length;    
    //将除了第一张图片隐藏   
     $(divBox).not(':first').hide();  
    //将第一个slider-item设为激活状态  
     $('#'+aid+' a:first').addClass('act');    
      
    //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动  

    $('#'+aid+' a').hover(
             function(e) {    
                stop();    
                var preIndex = $('#'+aid+' a').filter(".act").index();    
                currentIndex = $(this).index();    
                play(preIndex, currentIndex);  
             },
            function() {  
                 start();
             }
   
        );

 

 
        /**     * 向前翻页     */
    function pre() {    
        var preIndex = currentIndex;
        currentIndex = (--currentIndex + length) % length;   
        play(preIndex, currentIndex);
    }   
     /**     
          * 向后翻页     */
    function next() {
        var preIndex = currentIndex;  
        currentIndex = ++currentIndex % length;   
        play(preIndex, currentIndex);  
    }    

    /**     * 从preIndex页翻到currentIndex页     * preIndex 整数,翻页的起始页     * currentIndex 整数,翻到的那页     */   
    function play(preIndex, currentIndex) {    
        $(divBox).eq(preIndex).fadeOut(500).parent().children().eq(currentIndex).fadeIn(1000);
         //$(divBox).eq(preIndex).hide().parent().children().eq(currentIndex).show();
        $('#'+aid+' a').removeClass('act');  
        $('#'+aid+' a').eq(currentIndex).addClass('act');  
      }  
    
    /**     * 开始轮播     */  
    function start() {  
        if(!hasStarted) {     
             hasStarted = true;  
             interval = setInterval(next, t);
             }
        }
    /**     * 停止轮播     */
    function stop() {   
        clearInterval(interval);
        hasStarted = false;
    }   
        //开始轮播  
        start();  
       
 }

-----------------------------------------------------------------------------------------------------

顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友