jquery无缝滚动效果实现

2023-11-09 00:15•javascript•阅读 2504

demo如下：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style type="text/css">
        html{background:white;color:black}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}body,button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}th{text-align:inherit}fieldset,img{border:0}iframe{display:block}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}a:focus,*:focus{outline:0}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both;overflow:hidden}.clearfix{zoom:1}.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden}.hide{display:none}.block{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}
        .block{display:block;}
        a:hover{text-decoration:none;}
        .scroll_box{width:920px;position:relative;margin:0 auto;}
        .prev{width:40px;height:86px;background:#000;position:absolute;top:160px;left:-40px;font-size:60px;color:#fff;text-align:center;line-height:86px;}
        .next{width:40px;height:86px;background:#000;position:absolute;top:160px;right:-40px;font-size:60px;color:#fff;text-align:center;line-height:86px;}
        .prev:hover{opacity:0.8;filter:alpha(opacity=80);}
        .next:hover{opacity:0.8;filter:alpha(opacity=80);}
        .scroll_con{width:920px;height:430px;position:absolute;top:0px;overflow:hidden;}
        .scroll_con ul{height:920px;position:absolute;}
        .scroll_con ul li{width:920px;height:430px;}
        .scroll_con ul li img{width:100%;height:100%;}
    </style>
</head>
<body>
<div class="scroll_box">
    <a href="javascript:;" class="prev block"><</a>
    <div class="scroll_con">
        <ul class="clearfix" >
            <li class="fl">
                <img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide1.jpg"/>
            </li>
            <li class="fl">
                <img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide2.jpg"/>
            </li>
            <li class="fl">
                <img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide3.jpg"/>
            </li>
            <li class="fl">
                <img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide4.jpg"/>
            </li>
        </ul>
    </div>
    <a href="javascript:;" class="next block">></a>
</div>    
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
   //box 滚动盒子 btn_prev左按钮 btn_next右按钮 speed切换速度 baseW每次滚动宽度 isAuto是否开启自动滚动 autoSpeed自动滚动速度
    function switchScroll(box,btn_prev,btn_next,speed,baseW,isAuto,autoSpeed){
    var obj = box;
    var pr = btn_prev;
    var ne = btn_next;
    var _this = obj;
    var s_l = obj.find('li').length;
    var temp = _this.html();
    _this.css('width',baseW*s_l+'px').css('left','0px');
    var autoTimer = null;
    pr.click(function(){
        if(parseInt(_this.css('left')) >= 0){
            var tp = _this.find('li').eq(s_l-1).html();
            _this.find('li').eq(s_l-1).remove();
            _this.find('li').eq(0).before('<li class="fl">'+ tp +'</li>');
            _this.css('left',-baseW+'px');
            if(!_this.is(":animated")){//如果当前不处于动画状态
                _this.animate({
                    'left':(parseInt(_this.css('left'))+baseW)+'px'
                  }, speed );
            }
        }else{
            if(!_this.is(":animated")){//如果当前不处于动画状态
                _this.animate({ 
                    'left':(parseInt(_this.css('left'))+baseW)+'px'
                  }, speed );
            }
        }
    });
    ne.click(function(){
        if(parseInt(_this.css('left')) <= -(baseW*s_l-baseW)){
            var tp = _this.find('li').eq(0).html();
            _this.find('li').eq(s_l-1).after('<li class="fl">'+ tp +'</li>');
            _this.css('left',-(baseW*s_l-baseW*2)+'px');
            _this.find('li').eq(0).remove();
            if(!_this.is(":animated")){//如果当前不处于动画状态
            _this.animate({ 
                'left':(parseInt(_this.css('left'))-baseW)+'px'
              }, speed);
            }
        }else{
            if(!_this.is(":animated")){//如果当前不处于动画状态
            _this.animate({ 
                'left':(parseInt(_this.css('left'))-baseW)+'px'
              }, speed);
            }
        }
    });
    function autoScroll(){
        clearInterval(autoTimer);
        autoTimer = setInterval(function(){
            ne.trigger('click');
        },autoSpeed);
    }
    if(!!isAuto){
        autoScroll();
        _this.mouseover(function(){
            clearInterval(autoTimer);
        });
pr.mouseover(function(){
clearInterval(autoTimer);
});
ne.mouseover(function(){
clearInterval(autoTimer);
});
        _this.mouseleave(function(){
            autoScroll();
        });
    }
}
$(function(){
    switchScroll($('#Scroll'),$('.prev'),$('.next'),500,920,true,2000);
});
</script>

一次滚动两张图

function switchScroll(box,btn_prev,btn_next,speed,baseW,isAuto,autoSpeed){
    var obj = box;
    var pr = btn_prev;
    var ne = btn_next;
    var _this = obj;
    var s_l = obj.find('li').length;
    var Ls = Math.ceil(s_l/2);
    if(s_l%2 != 0){
        var tmpl = obj.html();
        obj.html(tmpl+tmpl);
        Ls = s_l;
        s_l =  obj.find('li').length;
    }
    var temp = _this.html();
    _this.css('width',baseW*Ls+'px').css('left','0px');
    var autoTimer = null;
    pr.click(function(){
        if(parseInt(_this.css('left')) >= 0){
            var tp = _this.find('li').eq(s_l-1).html();
            var tp1 = _this.find('li').eq(s_l-2).html();
            _this.find('li').eq(0).before('<li class="fl">'+ tp +'</li>');
            _this.find('li').eq(s_l).remove();
            _this.find('li').eq(0).before('<li class="fl">'+ tp1 +'</li>');
            _this.find('li').eq(s_l).remove();
            _this.css('left',-baseW+'px');
            if(!_this.is(":animated")){//如果当前不处于动画状态
                _this.animate({
                    'left':(parseInt(_this.css('left'))+baseW)+'px'
                  }, speed );
            }
        }else{
            if(!_this.is(":animated")){//如果当前不处于动画状态
                _this.animate({ 
                    'left':(parseInt(_this.css('left'))+baseW)+'px'
                  }, speed );
            }
        }
    });
    ne.click(function(){
        if(parseInt(_this.css('left')) <= -(baseW*Ls-baseW)){
            var tp = _this.find('li').eq(0).html();
            var tp1 = _this.find('li').eq(1).html();
            _this.find('li').eq(s_l-1).after('<li class="fl">'+ tp +'</li>');
            _this.find('li').eq(0).remove();
            _this.find('li').eq(s_l-1).after('<li class="fl">'+ tp1 +'</li>');
            _this.find('li').eq(0).remove();
            _this.css('left',-(baseW*Ls-baseW*2)+'px');
            if(!_this.is(":animated")){//如果当前不处于动画状态
            _this.animate({ 
                'left':(parseInt(_this.css('left'))-baseW)+'px'
              }, speed);
            }
        }else{
            if(!_this.is(":animated")){//如果当前不处于动画状态
            _this.animate({ 
                'left':(parseInt(_this.css('left'))-baseW)+'px'
              }, speed);
            }
        }
    });
    function autoScroll(){
        clearInterval(autoTimer);
        autoTimer = setInterval(function(){
            ne.trigger('click');
        },autoSpeed);
    }
    if(!!isAuto){
        autoScroll();
        _this.mouseover(function(){
            clearInterval(autoTimer);
        });
　　　　　pr.mouseover(function(){
　　　　　　　clearInterval(autoTimer);
　　　　　});
　　　　　ne.mouseover(function(){
　　　　　　　　clearInterval(autoTimer);
　　　　　});
        _this.mouseleave(function(){
            autoScroll();
        });
    }
}

jquery无缝滚动效果实现

相关推荐

Jquery+CSS实现遮罩效果

css 元素滚动背景图不动效果实现

图片无缝滚动，div+css

css实现视觉差的滚动

css3 无缝轮播效果小demo，轮播效果/渐隐渐现效果

Javascript实现信息滚动效果的方法

javascript实现无缝上下滚动，转

分享一个可以灵活控制的实现Javascript滚动效果的程序