找回密码
当前位置：前端开发者 > JavaScript > 正文

原生JS实现幻灯片

2018-10-17 分类：JavaScript 阅读(705) 评论(0)
移动端前端开发 招聘
南宁前端开发招聘
河北前端开发招聘信息

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 800px;
            height: 450px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .box span {
            width: 40px;
            height: 60px;
            display: block;
            position: absolute;
            top: 225px;
            margin-top: -20px;
            cursor: pointer;
            z-index: 1;
        }
        .box #left {
            width: 76px;
            height: 112px;
            background: url(‘http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png’) no-repeat left 0;
            left: 0;
            margin-top: -66px;
            display: none;
        }
        .box #right {
            width: 76px;
            height: 112px;
            background: url(‘http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png’) no-repeat right 0;
            right: 0;
            margin-top: -66px;
            display: none;
        }
        .box #txt {
            width: 100%;
            height: 30px;
            background-color: #000;
            opacity: 0.4;
            position: absolute;
            bottom: 0;
            color: #fff;
            line-height: 30px;
            text-align: center;
        }
        #ad {
            width: 4000px;
            height: 450px;
            position: absolute;
            left: -1600px;
        }
        #ad li {
            float: left;
        }
        .box #left:hover {
            background: url(‘http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png’) no-repeat left -112px;
        }
        .box #right:hover {
            background: url(‘http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png’) no-repeat right -112px;
        }
    </style>
    <script type=”text/javascript”>
        window.onload = function () {
            function $(id) { return document.getElementById(id); }
            var aLi = $(“ad”).children;
            function animate(obj, target, arrt) {
                //关闭上一个定时器
                clearInterval(obj.timer);
                $(“txt”).innerHTML = obj.children[0].children[0].alt;
                //管理定时器
                obj.timer = setInterval(function () {
                    //移动步长
                    var step = (target – obj.offsetLeft) / 10;
                    //步长取整
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //移动盒子 ： 盒子位置 + 步长
                    obj.style.left = obj.offsetLeft + step + “px”;
                    //关闭定时器
                    if (obj.offsetLeft % 800 == 0) {
                        clearInterval(obj.timer);
                        //判断点击的方向
                        if (arrt === “left”) {
                            var oLi = $(“ad”).children[aLi.length – 1].cloneNode(true);
                            //添加到最前面
                            obj.insertBefore(oLi, obj.children[0]);
                            //删除最后一个盒子
                            obj.removeChild(obj.children[aLi.length – 1]);
                            //让ul恢复初始值
                            obj.style.left = “-1600px”;
                        } else {
                            //克隆第一个盒子
                            var oLi = obj.children[0].cloneNode(true);
                            //添加到最后面
                            obj.appendChild(oLi);
                            //删除第一个盒子
                            obj.removeChild(obj.children[0]);
                            //让ul恢复初始值
                            obj.style.left = “-1600px”;
                        }
                    }
                }, 20);
            }
            var timer = setInterval(autoplay, 2000);
            function autoplay() {
                animate($(“ad”), -2400, “right”);
            }
            $(“ad”).parentNode.onmouseover = function () {
                clearInterval(timer);
                $(“left”).style.display = “block”;
                $(“right”).style.display = “block”;
            }
            $(“ad”).parentNode.onmouseout = function () {
                $(“left”).style.display = “none”;
                $(“right”).style.display = “none”;
                timer = setInterval(autoplay, 2000);
            }
            $(“left”).onclick = function () {
                clearInterval(timer);
                animate($(“ad”), -800, “left”);
            }
            $(“right”).onclick = function () {
                clearInterval(timer);
                animate($(“ad”), -2400, “right”);
            }
        }
    </script>
</head>
<body>
    <div class=”box”>
        <ul id=”ad”>
            <li><img src=”http://www.w2bc.com/upload/201609/20/jiaoben4524/images/4.jpg” alt=”闲静似娇花照水，行动如弱柳扶风。”></li>
            <li><img src=”http://www.w2bc.com/upload/201609/20/jiaoben4524/images/5.jpg” alt=”心较比干多一窍，病如西子胜三分。”></li>
            <li><img src=”http://www.w2bc.com/upload/201609/20/jiaoben4524/images/1.jpg” alt=”两弯似蹙非蹙笼烟眉，一双似喜非喜含情目。”></li>
            <li><img src=”http://www.w2bc.com/upload/201609/20/jiaoben4524/images/2.jpg” alt=”态生两靥之愁，娇袭一身之病。”></li>
            <li><img src=”http://www.w2bc.com/upload/201609/20/jiaoben4524/images/3.jpg” alt=”泪光点点，娇喘微微。”></li>
        </ul>
        <p id=”txt”>泪光点点，娇喘微微</p>
        <span id=”left”></span>
        <span id=”right”></span>
    </div>
</body>
</html>
前端开发招聘西安
公安局前端开发招聘
高级前端开发招聘
赞(0)
前端开发者 » 原生JS实现幻灯片
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论