jquery image scroll 图片无缝滚动

最新推荐文章于 2025-05-17 11:21:47 发布

原创最新推荐文章于 2025-05-17 11:21:47 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

26 篇文章

订阅专栏

javascript/jquery/zepto

17 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片滚动效果。通过绑定点击事件来触发图片的左右滚动，并且在达到边界时能够重新加载图片，形成循环滚动的效果。文章详细解释了如何控制图片的移动距离和速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//调用方法
    $('.scorll_ar_left').bind('click',function(){imagescroll('.itemlist','right',3,500);});
//图片滚动方法
    function imagescroll(parent,Orient,number,time){
        var p=$(parent),c=p.children(),w=c.outerWidth(),l=c.length,position=p.position(),le=position.left,scro=w*number,all=w*l;
        if (p.is(":animated")) return ! 1; //动画未结束前点击事件不能生效的
        if(Orient == 'left'){//向左运动
            if(le == (scro-all)){//最右边 
                var value= scro-all;
                var div='';
                for (var i = 0; i < number; i++) {
                     div+='<div class="item">'+c.eq(i).html()+'</div>';
                };
                //'<div class="item">'+c.eq(0).html()+'</div><div class="item">'+c.eq(1).html()+'</div><div class="item">'+c.eq(2).html()+'</div>';
                p.append(div);
                p.css('left',value+scro+'px');
                p.animate({left:value+'px'},time);
                for(var i= 0;i < number;i++){                
                p.children().first().remove();                
                }

            }else{
                p.animate({ left: le-scro+'px' },time);
            }
        }else if(Orient == 'right'){ // 向右运动
            if(le == 0 ){//最左边
                //添加
                 var div='';
                 for (var i = number; i > 0; i--) {
                     div+='<div class="item">'+c.eq(l-i).html()+'</div>';
                 };
                p.prepend(div);
                p.css('left',-scro+'px');
                p.animate({left:'0px'}, time);
                for(var i=0;i<number;i++){
                p.children().last().remove();
                }
                //删除
                //console.log(p.html());
            }else{
                p.animate({left:le+scro+'px'}, time);
            }
        }
    }