无缝滚动

最新推荐文章于 2023-07-20 20:49:56 发布

王武顺

最新推荐文章于 2023-07-20 20:49:56 发布

阅读量553

点赞数

分类专栏： js常用例子文章标签：网页特效无缝滚动

本文链接：https://blog.csdn.net/wangwushun/article/details/50731844

版权

js常用例子专栏收录该内容

8 篇文章 0 订阅

订阅专栏

无缝滚动是最常见的网页效果，找的例子（无缝滚动4）看得不太明白，用自己最容易理解的方式分析下，3个例子，依次递进（可以直接复制到编辑器里查看）

无缝滚动1

基本原理：复制一份需要移动的区域，2个区块循环运动

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无缝滚动</title>
        <style>
            /* css重置文件 */
            body,div,h1,h2,h3,h4,h5,h6,p,img,a,strong,em,span,i,ol,ul,li,dl,dt,dd{ margin:0; padding:0;}
            body{ background:#fff;}
            body{   font-family:"Microsoft Yahei", Helvetica, Arial, sans-serif;}
            b,strong{ font-weight:normal;}
            i,em{ font-style:normal;}
            a{ text-decoration:none; color:#000;}
            li{ list-style:none;}
            h1,h2,h3,h4,h5,h6{ font-weight:normal;}
            a img{ border:none;}
            .clearfix:after{ display:block; content:""; clear:both;}
            .clearfix{ zoom:1}
            .fl{ float:left;}
            .fr{ float:right;}
            input{ border:none 0; outline:none; padding:0;}
            img{ vertical-align:top;}
            select{ background:#fff;}

            .wrap{position: absolute; left: 100px; top: 100px; width: 200px; height: 67px; overflow: hidden;  }
            .prev{position: absolute; top: 0; left: 0px; width: 30px; height: 100%; background: #ccc;z-index: 1;}
            .next{position: absolute; top: 0; right: 0px; width: 30px; height: 100%; background: #ccc;z-index: 1;}
            .wrap ul{position: absolute; top: 0; left: 0;}
            .wrap ul li{ float: left;}
            .wrap ul li img{width: 100px;}

        </style>
        <script>
            window.onload=function(){

                //获取样式函数；
                function getStyle (obj,sName) {
                    if (obj.currentStyle) {
                        return obj.currentStyle[sName];
                    } else{
                        return window.getComputedStyle(obj,false)[sName];
                    }
                }
                var oWrap=document.getElementsByTagName('div')[0];
                var oPrev=document.getElementsByTagName('a')[0];
                var oNext=document.getElementsByTagName('a')[1];

                var oUl=document.getElementsByTagName('ul')[0];
                var aLi=document.getElementsByTagName('li');

                //复制一份oUl,并新获取oUL的宽度；               
                oUl.innerHTML+=oUl.innerHTML;
                oUl.style.width=parseInt(getStyle(aLi[0],'width'))*aLi.length+'px';

                var timer=null;

                //向右移动；
                function toRight () {
                    clearInterval(timer);
                    timer=setInterval(function  () {
                        var l=oUl.offsetLeft+10;
                        if (l>=0) {
                            l=-oUl.offsetWidth/2;
                        }
                        oUl.style.left=l+'px';
                    },100)  
                }
                //向左移动；
                function toLeft () {
                    clearInterval(timer);
                    timer=setInterval(function  () {
                        var l=oUl.offsetLeft-10;
                        if (l<=-oUl.offsetWidth/2) {
                            l=0;
                        }
                        oUl.style.left=l+'px';
                    },100)
                }

                oPrev.onmouseover=function  () {
                    //alert(1);
                    toLeft ();

                }
                oNext.onmouseover=function  () {
                    //alert(2);
                    toRight ();
                }               

            }
        </script>
    </head>
    <body>
        <div class="wrap">
            <a href="javascript:;" class="prev"> 上 </a>
            <a href="javascript:;" class="next"> 下 </a>
            <ul class="clearfix">
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/3.jpg" /></li>
                <li><img src="images/4.jpg" /></li>
            </ul>
        </div>


    </body>
</html>

无缝滚动2

一个区域一个区域的运动。注意下标iNum的变化；move.js里面是运动框架（包括move函数，getStyle函数，在无缝滚动3例子里面有）

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>无缝切换</title>
        <style type="text/css">
                div,
                ul,
                li {
                    padding: 0;
                    margin: 0;
                }

                li {
                    list-style: none;
                    float: left;
                    width: 100px;
                    height: 100px;


                    background: #000;
                    font-size: 50px;
                    color: #fff;
                    line-height: 100px;
                    text-align: center;
                }

                .warp {
                    position: relative;
                    width: 100px;
                    margin: 0 auto;
                    height: 100px;
                    border: 1px solid red;
                    overflow: hidden;
                    /*overflow: hidden; 添加注释注意其变化*/
                }

                ul {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
        </style>
        <script type="text/javascript" src="move.js"></script><!-- move.js里面是运动框架（包括move函数，getStyle函数，在无缝滚动3例子里面有） -->
        <script type="text/javascript">
            window.onload=function(){
                var oList = document.getElementById('list');
                var aLi = oList.getElementsByTagName('li');
                var aBtn = document.getElementsByTagName('input');
                var oneSize = aLi[0].offsetWidth;
                var oP=document.getElementsByTagName('p')[0];
                var iNum = 1;//iNum代表第几块区域
                var bBtn1 = true;//bBtn1与bBtn2 ，当运动完成之后才能进行下一步操作；
                var bBtn2 = true;

                //再复制一份oList以及重新计算oList的宽度；
                oList.innerHTML+=oList.innerHTML;
                oList.style.width=aLi[0].offsetWidth*aLi.length+'px';

                //点击上一个的时候；
                aBtn[0].onclick=function  () {
                    if(bBtn1&&bBtn2){
                        bBtn2=!bBtn2;

                        //当区域1在最左侧的时候，先把oList的位置快速移动到复制的区块1，然后向左move运动到区域3；
                        if (iNum<=1) {
                            iNum=4;
                            oList.style.left=-oneSize*3+'px';
                            oP.innerHTML=iNum;
                        }
                        iNum--;
                        oP.innerHTML=iNum;
                        move(oList,{left:-oneSize*(iNum-1)},{duration:1000,complete:function () {
                            bBtn2=!bBtn2;
                        }});
                    }
                }

                //点击下一个的时候；
                aBtn[1].onclick=function  () {
                    //当区域move运动到区域3的时候，move运动完成后，olist的位置快速移动到最左侧；
                    if(bBtn1&&bBtn2){
                        bBtn1=!bBtn1;
                        move(oList,{left:-oneSize*iNum},{duration:1000,complete:function () {
                            if (iNum>=4) {
                                iNum=1;
                                oList.style.left='0'+'px';
                                oP.innerHTML=iNum;
                            }
                            bBtn1=!bBtn1;
                        }});
                        iNum++;
                        oP.innerHTML=iNum;
                    }

                }

            }
        </script>
</head>
<body>
        <div class="warp">
            <ul id="list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
            </ul>
        </div>
        <input type="button" value="上一个" />
        <input type="button" value="下一个" />
        <p>1</p>
</body>
</html>

无缝滚动3

完整版无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>无缝切换</title>
        <style type="text/css">
                div,
                ul,
                li {
                    padding: 0;
                    margin: 0;
                }

                li {
                    list-style: none;
                    float: left;
                    width: 100px;
                    height: 100px;


                    background: #000;
                    font-size: 50px;
                    color: #fff;
                    line-height: 100px;
                    text-align: center;
                }

                .warp {
                    position: relative;
                    width: 100px;
                    margin: 0 auto;
                    height: 100px;
                    border: 1px solid red;
                    /*overflow: hidden;*/
                    /*overflow: hidden;  加上去掉对比变化*/
                }

                ul {
                    position: absolute;
                    top: 0;
                    left: 0;

                }
                section{overflow: hidden;}
                section a {
                    float: left;
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    background: #5690D2;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    text-align: center;
                }
                section .action{ background: #FF0000;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oList = document.getElementById('list');
                var aLi = oList.getElementsByTagName('li');
                var aBtn = document.getElementsByTagName('input');
                var oneSize = aLi[0].offsetWidth;
                var oP=document.getElementsByTagName('p')[0];
                var iNum = 1;//iNum代表第几块区域
                var bBtn1 = true;//bBtn1与bBtn2 ，当运动完成之后才能进行下一步操作；
                var bBtn2 = true;

                var aA=document.getElementsByTagName('a');

                //再复制一份oList以及重新计算oList的宽度；
                oList.innerHTML+=oList.innerHTML;
                oList.style.width=aLi[0].offsetWidth*aLi.length+'px';

                //点击上一个的时候；
                aBtn[0].onclick=function  () {
                    if(bBtn1&&bBtn2){
                        bBtn2=!bBtn2;

                        if (iNum<=1) {//当区域1在最左侧的时候，先把oList的位置快速移动到复制的区块1，然后向左move运动到区域3；
                            iNum=aLi.length/2+1;
                            oList.style.left=-oneSize*aLi.length/2+'px';
                            oP.innerHTML='第'+iNum+'快区域';
                        }
                        iNum--;
                        oP.innerHTML='第'+iNum+'快区域';

                        move(oList,{left:-oneSize*(iNum-1)},{duration:600,complete:function () {
                            bBtn2=!bBtn2;
                            action(iNum-1,aLi.length/2);

                        }});

                    }
                }
                //点击下一个的时候；
                aBtn[1].onclick=function  () {
                    if(bBtn1&&bBtn2){
                        bBtn1=!bBtn1;
                        //当区域move运动到区域3的时候，move运动完成后，olist的位置快速移动到最左侧；
                        move(oList,{left:-oneSize*iNum},{duration:600,complete:function () {
                            if (iNum>=aLi.length/2+1) {
                                iNum=1;
                                oList.style.left='0'+'px';
                                oP.innerHTML='第'+iNum+'快区域';
                                action(iNum-1,aLi.length/2);

                            }else{
                                action(iNum-1,aLi.length/2);
                            }
                            bBtn1=!bBtn1;
                        }});
                        iNum++;
                        oP.innerHTML='第'+iNum+'快区域';

                    }
                }

                //点击三个a的时候；
                if(bBtn1&&bBtn2){
                    for(var i=0;i<aA.length;i++){
                        aA[i].index=i;
                        aA[i].onclick=function  () {
                            bBtn1=!bBtn1;
                            bBtn2=!bBtn2;
                            iNum=this.index+1;
                            oP.innerHTML='第'+iNum+'快区域';
                            _this=this.index;
                            move(oList,{left:-oneSize*(this.index)},{complete:function  () {
                                bBtn1=!bBtn1;
                                bBtn2=!bBtn2;
                                action (_this,aA.length);
                            }});


                        }
                    }                   
                }

                //显示a的状态（体现颜色变化）的函数；
                function action (num,index) {
                    for (var i=0;i<index;i++) {
                        aA[i].className='';
                    }
                    aA[num].className='action';
                }

                //获取元素具体样式的函数；
                function getStyle(obj,name){
                    return (obj.currentStyle || getComputedStyle(obj,false))[name];
                }

                //运动框架
                function move(obj,json,options){
                    //考虑options默认值
                    options=options || {};
                    options.easing=options.easing || 'ease-out'; //运动方式
                    options.duration=options.duration || 700;//运动时间


                    clearInterval(obj.timer);
                    var count=Math.round(options.duration/30);
                    var start={};
                    var dis={};

                    for(var name in json){
                        start[name]=parseFloat(getStyle(obj,name));
                        dis[name]=json[name]-start[name];
                    }

                    var n=0;

                    obj.timer=setInterval(function(){
                        n++;

                        for(var name in json){
                            switch(options.easing){
                                case 'linear':
                                    var a=n/count;
                                    var cur=start[name]+dis[name]*a;
                                    break;
                                case 'ease-in':
                                    var a=n/count;
                                    var cur=start[name]+dis[name]*(a*a*a);
                                    break;
                                case 'ease-out':
                                    var a=1-n/count;
                                    var cur=start[name]+dis[name]*(1-a*a*a);
                                    break;
                            }

                            if(name=='opacity'){
                                obj.style.opacity=cur;
                                obj.style.filter='alpha(opacity:'+cur*100+')';
                            }else{
                                obj.style[name]=cur+'px';   
                            }
                        }

                        if(n==count){
                            clearInterval(obj.timer);
                            options.complete && options.complete();//回调函数
                        }
                    },30);
                }

            }
        </script>
</head>
<body>
        <div class="warp">
            <ul id="list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
            </ul>
        </div>
        <section>
            <a href="#" class="action" >a</a>
            <a href="#" >a</a>
            <a href="#" >a</a>
        </section>
        <input type="button" value="上一个" />
        <input type="button" value="下一个" />
        <p>第1快区域</p>
</body>
</html>

无缝滚动4

这就是那个无缝滚动例子，看得不太明白，有兴趣的同学可以研究下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<title>智能社— http://www.zhinengshe.com</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#box{ width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;}
#box ul{ position:absolute; left:0; top:0;}
#box ul li{ float:left; width:534px; height:300px;}
#box ul li img{ height:300px;}

#box a{ transition:.2s all ease;}
#box .prev,#box .next{position:absolute;  top:50%; z-index:2; height:80px; line-height:80px; background:rgba(0,0,0,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:none;}
#box .prev{ left:0;}
#box .next{ right:0;}
#box a:hover{ background:rgba(255,0,0,0.4);}

#box ol{ position:absolute; width:120px; left:50%; margin-left:-60px; bottom:10px;}
#box ol li{ width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:50%;}
#box ol li.active{ background:#fff;}
</style>
<script>
window.onload=function(){
    var oBox=document.getElementById('box');
    var oPrev=oBox.children[0];
    var oNext=oBox.children[1];
    var oUl=oBox.getElementsByTagName('ul')[0];
    var aLi=oUl.children;
    var oOl=oBox.getElementsByTagName('ol')[0];
    var aBtn=oOl.children;

    //复制一份
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';

    var W=oUl.offsetWidth/2;

    var iNow=0;


    oBox.onmouseover=function(){
        oPrev.style.display='block';
        oNext.style.display='block';
    };
    oBox.onmouseout=function(){
        oPrev.style.display='none';
        oNext.style.display='none';
    };

    for(var i=0; i<aBtn.length; i++){
        (function(index){
            aBtn[i].onclick=function(){
                iNow=index+Math.floor(iNow/aBtn.length)*aBtn.length;
                tab();
                document.title=iNow;
            }
        })(i);
    }

    function tab(){
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].className='';
        }
        if(iNow>0){
            aBtn[iNow%aBtn.length].className='active';
        }else{
            aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';    
        }
        //oUl.style.left=-iNow*aLi[0].offsetWidth+'px'; 
        startMove(oUl,-iNow*aLi[0].offsetWidth);
    }

    //点击
    oNext.onclick=function(){
        iNow++;
        tab();
        document.title=iNow;
    };
    oPrev.onclick=function(){
        iNow--;
        tab();
        document.title=iNow;
    };


    var left=0;
    function startMove(obj,iTarget){
        var count=Math.floor(1000/30);
        var start=left;
        var dis=iTarget-start;
        var n=0;
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            n++;

            var a=1-n/count;
            left=start+dis*(1-Math.pow(a,3));

            if(left<0){
                obj.style.left=left%W+'px'; 
            }else{
                obj.style.left=(left%W-W)%W+'px';       
            }

            if(n==count){
                clearInterval(obj.timer);   
            }
        },30);
    }
};
</script>
</head>

<body>
<div id="box">
    <a href="javascript:;" class="prev">prev</a>
    <a href="javascript:;" class="next">next</a>
    <ul>
        <li><img src="img/0.jpg"></li>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
    </ul>
    <ol>
        <li class="active">0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
</body>
</html>