现在的位置: 首页 > 综合 > 正文

jquery image scroll 图片无缝滚动

2018年04月14日 ⁄ 综合 ⁄ 共 1107字 ⁄ 字号 评论关闭
//调用方法
    $('.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);
            }
        }
    }

抱歉!评论已关闭.