轮播图例子

下面是一个轮播图的例子，实现无缝滚动。

思路如下：把ul复制一份，当图片停止滚动时，判断这张图是不是复制的ul的第一张图片，如果是就把ul拉回来。

源代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            #box{
                width: 730px;
                height: 454px;
                margin: 50px auto;
                position: relative;
                overflow: hidden;
            }
            li{
                list-style: none;
                float: left;
            }
            ul{
                position: absolute;
                left:0;
            }
            #box div{
                height: 70px;
                width: 100%;
                background: black;
                opacity: 0.6;
                position: absolute;
                bottom: 0;
                color:white;
                text-indent: 20px;   /*缩进*/
            }            
            #box div h3{
                line-height: 40px;
            }        
        </style>
        <script src="js/move.js"></script>     /*运动框架*/
        <script>
            window.onload=function(){
                var ul=document.querySelector("ul");
                var box=document.getElementById("box");
                var div=document.querySelector("#box div");
                var timer;
                var n=0; //n存储图片走的个数
                var textArr=[
                    {"title":'盛惠而来',"content":'京东携手天天果园百万车厘子，29元包邮畅想'},
                    {"title":'荣耀7',"content":'有点不同，0元预约，免费抽奖1999元'},
                    {"title":'老板购物节',"content":'2015我要更省，老板XX购物节精彩来袭'},
                    {"title":'送钱送美酒',"content":'大盘让我心碎，我在京东买醉送钱送美酒'},
                    {"title":'玩转暑假',"content":'追风少年，联想拯救者全国独家抢购'},
                    {"title":'游园门票',"content":'奔跑吧周末游游园门票一元秒杀'}
                ];
                
                //复制ul
                ul.innerHTML+=ul.innerHTML;
                var lis=document.querySelectorAll("li");
        
                
                var w=parseInt(getComputedStyle(lis[0]).width);
                ul.style.width=w*lis.length+"px";
                
                div.innerHTML='<h3>'+textArr[0].title+'</h3><p>'+textArr[0].content+'</p>';
                
                //创建轮播函数
                function roll(){
                    timer=setInterval(function pic(){
                    n++;
                    //文字向下移动
                    move(div,{bottom:-70},500,"linear",function(){
                        //ul向左移动
                        move(ul,{left:-730*n},1000,"linear",function(){
                            if(n==lis.length/2){
                                ul.style.left=0;
                                n=0    //n值重置为0
                            }
                            
                            //在文字上去之前应该把内容改了
                            div.innerHTML='<h3>'+textArr[n].title+'</h3><p>'+textArr[n].content+'</p>';
                            
                            //文字向上移动
                            move(div,{bottom:0},500,"linear");
                        })
                    });
                },3000);
                }
                
                //调用函数
                roll();
                
                //鼠标移入，停止滚动
                box.onmouseover=function(){
                    clearInterval(timer);
                }
                
                //鼠标移出，继续滚动
                box.onmouseout=function(){
                    roll();
                }
                
                
                
            }
        </script>
    </head>
    <body>
        <div id="box">
            <ul>
                <li><img src="img2/1.jpg"/></li>
                <li><img src="img2/2.jpg"/></li>
                <li><img src="img2/3.jpg"/></li>
                <li><img src="img2/4.jpg"/></li>
                <li><img src="img2/5.jpg"/></li>
                <li><img src="img2/6.jpg"/></li>
            </ul>
            
            <div>
                <h3></h3>
                <p></p>
            </div>
        </div>        
    </body>
</html>
View Code

 

posted @ 2018-08-17 09:01  只是那些  阅读(148)  评论(0)    收藏  举报