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

前端开发效果实例_click所有DIV向下掉

2018-07-15 分类：教程 阅读(754) 评论(0)

前端开发插件api文档|前端开发小图标插件|前端项目开发教程

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>移动web前端开发兼容问题:js完整轮播</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .demo {
            width: 490px;
            height: 170px;
            padding: 5px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }
        #innerht {
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
        }
        ul {
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
        }
        ul li {
            float: left;
            height: 170px;
        }
        ol {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
        ol li {
            width: 16px;
            height: 16px;
            display: inline-block;
            text-align: center;
            line-height: 16px;
            background: #fff;
            margin: 5px;
            cursor: pointer;
        }
        ol li.current {
            background: gold;
        }
        button {
            width: 20px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: 0;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            display: none;
            cursor: pointer;
        }
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
    </style>
</head>
<body>
    <div class=”demo”>
        <div id=”innerht”>
            <ul>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403dapffd9ffpf0vdf0.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155402wj2qtb3n8j5844qz.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403jcutql3z0i48uyt4.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403v4ttwpz4f3cwaeeq.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403q3440i0e344zpzp0.jpg” height=”170″ width=”490″ alt=””>
                </li>
            </ul>
            <ol></ol>
            <button id=”left”>←</button>
            <button id=”right”>→</button>
        </div>
    </div>
</body>
<script type=”text/javascript”>
    (function (window) {
        // 封装document.getElementById函数
        function $(id) {
            return document.getElementById(id);
        };
        // 获取相应对象
        var innerht = $(“innerht”), ul = innerht.children[0], ulli = ul.children[0];
        // 获取ul的第一个li克隆并插入ul最后
        ul.appendChild(ulli.cloneNode(true));
        // 获取一个banner的宽度
        var liWidth = innerht.offsetWidth;
        var ulLis = ul.children, ol = ul.nextElementSibling;
        // 设定ul的宽度
        ul.style.width = ulLis.length + “00%”;
        // 设定每个li的宽度
        for (i = 0; i < ulLis.length; i++) {
            ulLis[i].style.width = 100 / ulLis.length + “%”;
        };
        for (i = 0; i < ulLis.length – 1; i++) {
            var li = document.createElement(“li”);
            li.innerHTML = i + 1;
            ol.appendChild(li);
        }
        var olLis = ol.children;
        // 为第一个li添加选中状态
        olLis[0].className = “current”;
        var left = $(“left”), right = $(“right”);
        //给大盒子绑定鼠标事件
        innerht.onmouseover = function () {
            left.style.display = “block”;
            right.style.display = “block”;
            clearInterval(clock);
        };
        innerht.onmouseout = function () {
            left.style.display = “none”;
            right.style.display = “none”;
            clock = setInterval(right.onclick, 3000);
        };
        //为ol中的li添加鼠标事件
        for (i = 0; i < olLis.length; i++) {
            // 为每个li添加自定义属性
            olLis[i].index = i;
            olLis[i].onmouseover = function () {
                for (j = 0; j < olLis.length; j++) {
                    olLis[j].className = “”;
                };
                this.className = “current”;
                var index = this.index;
                s = index;
                squire = index;
                var target = -index * liWidth;
                animate(ul, target);
            }
        };
        // 左右按钮点击事件
        var s = 0, squire = 0;
        right.onclick = function () {
            if (s === olLis.length) {
                ul.style.left = “0px”;
                s = 0;
            };
            s++;
            var target = -s * liWidth;
            animate(ul, target);
            if (squire === olLis.length – 1) {
                squire = 0
            } else {
                squire++;
            };
            for (i = 0; i < olLis.length; i++) {
                olLis[i].className = “”;
            };
            olLis[squire].className = “current”;
        };
        left.onclick = function () {
            if (s === 0) {
                ul.style.left = -olLis.length * liWidth + “px”;
                s = olLis.length;
            };
            s–;
            var target = -s * liWidth;
            animate(ul, target);
            if (squire === 0) {
                squire = olLis.length – 1;
            } else {
                squire–;
            };
            for (i = 0; i < olLis.length; i++) {
                olLis[i].className = “”;
            };
            olLis[squire].className = “current”;
        };
        // 添加自动播放事件
        var clock = null;
        clock = setInterval(right.onclick, 3000);
        //封装animate函数
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var leader = obj.offsetLeft, step = 30;
                step = leader < target ? step : -step;
                if (Math.abs(leader – target) >= Math.abs(step)) {
                    leader = leader + step;
                    obj.style.left = leader + “px”;
                } else {
                    obj.style.left = target + “px”;
                    clearInterval(obj.timer);
                }
            }, 15);
        }
    })(window);
</script>
</html>

留个问题：如何让再次点击时，DIV再全上来？

现在前端开发用什么框架|ui java web前端开发框架有哪些|前端开发框架 exitjs

赞(0)
前端开发者 » 前端开发效果实例_click所有DIV向下掉
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论