前端开发简版无缝滚动图

前端开发系统环境搭建 网站前端后端实战开发案例视频 前端开发有哪些证书

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <style type=”text/css”>
        ul,
        li {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 800px;
            height: 450px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .box span {
            width: 40px;
            height: 60px;
            display: block;
            position: absolute;
            top: 225px;
            margin-top: -20px;
            cursor: pointer;
            z-index: 1;
        }
        .box #left {
            background: url(‘http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png’) no-repeat;
            left: 0;
        }
        .box #right {
            background: url(‘http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png’) no-repeat;
            right: 0;
        }
        #ad {
            width: 4000px;
            height: 450px;
            position: absolute;
        }
        #ad li {
            float: left;
        }
    </style>
    <script type=”text/javascript”>
        window.onload = function () {
            var ad = document.getElementById(“ad”);
            var timer = null;//管理定时器
            var leader = 0;
            //1秒之后再开启定时器
            timer = setTimeout(function () {
                timer = setInterval(autoAd, 30);
            }, 1000);
            //开启定时器
            function autoAd() {
                leader -= 5;
                leader <= -3200 ? leader = 0 : leader;
                ad.style.left = leader + “px”;
            }
            //鼠标划入 关闭定时器
            ad.onmouseover = function () {
                clearInterval(timer);
            }
            //鼠标离开 开启定时器
            ad.onmouseout = function () {
                timer = setInterval(autoAd, 20);
            }
        }
    </script>
</head>
<body>
    <div class=”box”>
        <ul id=”ad”>
            <li><img src=”http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg” alt=””></li>
            <li><img src=”http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg” alt=””></li>
            <li><img src=”http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg” alt=””></li>
            <li><img src=”http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg” alt=””></li>
            <li><img src=”http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg” alt=””></li>
        </ul>
        <span id=”left”></span>
        <span id=”right”></span>
    </div>
</body>
</html>

到底哪些人在做前端开发 前端开发项目流程 一个具体的前端开发项目

» 本文来自:前端开发者 » 《前端开发简版无缝滚动图》
» 本文链接地址:https://www.rokub.com/5384.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!