html 文字、图片水平无限滚动

html 文字、图片水平无限滚动

经常在淘宝、京东的app页面中看见水平的广告轮播和中奖信息的轮播。

我知道的实现这种无限滚动效果的方法有三种：

• 使用CSS3样式实现
• 使用js实现
• marquee标签（好像不推荐使用了，我没用过，百度可以找到挺多相关博客的）

1.方式

不管是用css实现还是js，实现方式是差不多的。为了让无限循环滚动时内容衔接更好一点，滚动内容会有两份一模一样的，大概步骤如下：

2.CSS3实现

主要使用到了绝对定位、动画、@keyframes属性，主要是靠@keyframes中的from和to来控制。
HTML代码中，前三张图片与后三张图片是一样的，前三张图片就是要无限滚动的图片。

<div class="container">  
        <ul class="imgcss">  
            <li>
                <img src="./img/shop4.jpg"> 
            </li>
            <li>
                <img src="./img/shop5.jpg"> 
            </li>
            <li>
                <img src="./img/shop7.jpg"> 
            </li>
            <li>
                <img src="./img/shop4.jpg"> 
            </li>
            <li>
                <img src="./img/shop5.jpg"> 
            </li>
            <li>
                <img src="./img/shop7.jpg"> 
            </li>
        </ul>  
    </div>  

CSS代码是比较关键的，要滚动的部分（我这是拿ul标签作为滚动）需要设置动画animation:scoll 6s linear 0s infinite;，并且要设置循环infinite；图片和文字是需要展示成一行的，我这里用浮动来实现；还有就是写@keyframes，需要计算要滚动的内容的宽度，我的滚动内容是三张图片，是320*240的尺寸，所以@keyframes中to部分就该写960（320*3=960），这样三张图片滚动过了之后，动画才会重新执行，达到无限循环的效果；还有animation-play-state: paused; 的意思是当鼠标悬浮在滚动内容上面的时候动画会停止。
也可以直接将图片换成文字，要注意的是需要获取文字的宽度。

.container{  
        width:400px;  
        height: 240px;
        margin:20px auto;  
        overflow: hidden;  
        position: relative;  
        border: 1px solid red;
    }  
    .container .imgcss{  
        animation:scoll 6s linear 0s infinite;  
    } 
    .container .textcss {
        animation:textScroll 6s linear 0s infinite;  
    }
    .container ul {
        width:4000px;  
        left:0;  
        top:0;  
        position: absolute;  
    }
    .container ul:hover {
        animation-play-state: paused;
    } 
    .container ul li{  
        float:left;  
    }  
    @keyframes scoll{  
        from{  
            left:0;  
        }  
        to{  
            left:-960px;  
        }  
    }   
    @keyframes textScroll{  
        from{  
            left:0;  
        }  
        to{  
            left:-986px;  
        }  
    }   

我简单实现了一下：

这种方式看起来挺方便的，在原有的页面上加一些动画的样式就可以实现，但是比较麻烦的是需要知道滚动内容的宽度，如果内容是服务端返回的就比较麻烦了。

3.js实现

js主要是使用定时器，用scrollLeft、scrollTop来控制滚动的方向。
内容可以使图片，也可以是文字。

HTML：

<div id="container2" class="container2">
        <ul id="ul1">
            <!-- <li>11111111111111111111111111111111111</li>
            <li>22222222222222222222222222222222222</li>
            <li>33333333333333333333333333333333333</li> -->
            <li>
                <img src="./img/shop4.jpg"> 
            </li>
            <li>
                <img src="./img/shop5.jpg"> 
            </li>
            <li>
                <img src="./img/shop7.jpg"> 
            </li>
        </ul>
        <ul id="ul2">

        </ul>
    </div>

CSS：

.container2 {
        width:600px;  
        height: 240px;
        margin:20px auto;  
        overflow: hidden;   
        border: 1px solid red;
    }
    .container2 ul {
        display: table-cell;
    }
    .container2 li {
        display: table-cell;
    }

js：

var container = document.getElementById("container2");
        var ul1 = document.getElementById("ul1");
        // 将内容复制到ul2中
        var ul2 = document.getElementById("ul2");
        ul2.innerHTML = ul1.innerHTML;

        function marquee() {
            // 当滚动到滚动内容的末端时，就回到原位重新开始滚动
            if (container.scrollLeft >= ul1.scrollWidth) {
                container.scrollLeft = 0;
            } else {
                container.scrollLeft++;
            }
        }
        // 设置一个定时器
        var s = setInterval(marquee, 50);
        // 鼠标悬浮滚动停止
        container.onmouseover = function() { clearInterval(s);  } 
        container.onmouseout = function() { s = setInterval('marquee()', 50);}

实现的效果更上面的是一样的，用js的话感觉会比较灵活。

我再网上看到了一个封装好了的滚动的源码，可以实现上下左右滚动，文字图片都可以，使用挺方便的。

参考：

• http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140826154818
• http://blog.163.com/liu_hai_feng@126/blog/static/43580500201391125235463/