zoukankan      html  css  js  c++  java
  • js实现标准无缝滚动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无缝滚动</title>
        <style>
        #warp{
            width: 1200px;
            height: 300px;
            overflow: hidden;
            margin:100px auto 0;
        }
        #warp #con{
            width: 4000px;
            height: 300px;
            overflow: hidden;
        }
        #warp #con #box1{
             float: left;
             overflow: hidden;
        }
        #warp #con #box2{
             float: left;
             overflow: hidden;
        }
        #warp img{
            float: left;
            width: 200px;
            height: 300px;
        }
        </style>
    </head>
    <body>
        <div id="warp">
            <div id="con">
                <div id="box1">
                    <img src="images/meinv1.jpg" alt="">
                    <img src="images/meinv2.jpg" alt="">
                    <img src="images/meinv3.jpg" alt="">
                    <img src="images/meinv4.jpg" alt="">
                    <img src="images/meinv5.jpg" alt="">
                    <img src="images/meinv6.jpg" alt="">
                </div>
                <div id="box2"></div>
            </div>
        </div>
        <script>
            var warp=document.getElementById('warp');
            var con=document.getElementById('con');
            var box1=document.getElementById('box1');
            var box2=document.getElementById('box2');
            // box2.innerHTML=box1.innerHTML;
            var timer1=null,x=0;
            function scroll(){//滚动函数
            box2.innerHTML=box1.innerHTML;
            timer1=setInterval(function(){
                x++;
                if (x>=box1.clientWidth) {
                    x=0;
                    warp.scrollLeft=x;
                }
                warp.scrollLeft=x;
            },10)
            }
            scroll();
            warp.onmouseenter=function(){
                clearInterval(timer1);
            }
            warp.onmouseleave=function(){
                scroll();
            }
        </script>
    </body>
    </html>

    这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度,使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动,具体的请大家参考代码。

  • 相关阅读:
    eclipse恢复界面默认设置
    文件夹的拷贝
    文件的输入输出
    十进制转二进制,八进制,十六进制(查表法)
    数组元素的查找(折半查找)
    C++几个小函数
    C++ 内部排序(一)
    C++实现链表
    C++输出IP地址段内的合法地址
    我看软件工程师的职业规划
  • 原文地址:https://www.cnblogs.com/duenyang/p/5819421.html
Copyright © 2011-2022 走看看