学习webAPI第六天-轮播图

最新推荐文章于 2024-03-07 17:38:13 发布

逆魂夜

最新推荐文章于 2024-03-07 17:38:13 发布

阅读量578

点赞数

分类专栏： webAPI

本文链接：https://blog.csdn.net/qq_44388393/article/details/86484453

版权

webAPI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习完轮播图,但还有些搞不明白,可能是做到少的原因,往后做的多可能就明白了
轮播图代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: #DB192A;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="all" id='box'>
    <div class="screen"><!--相框-->
        <ul>
            <li>
                <img src="images/1.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/2.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/3.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/4.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/5.jpg" width="500" height="200"/>
            </li>
        </ul>
        <ol>
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
    //获取最外面的div
    var box = my$("box")
    //获取相框
    var screen = box.children[0];
    //获取相框的宽度
    var imgWidth = screen.offsetWidth;
    //获取ul
    var ulObj = screen.children[0];
    //获取ul中的所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = screen.children[1];
    //获取焦点的div
    var arr = my$("arr");

    var index = 0;//记录索引

    //1.创建小按钮---根据ul中的li的个数
    for (var i = 0; i < list.length; i++) {
        var liObj = document.createElement("li")
        olObj.appendChild(liObj);
        liObj.innerHTML = i + 1;
        liObj.setAttribute("index", i);
        //注册鼠标进入事件
        liObj.onmouseover = function () {
            //先移除所有的背景颜色
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class")
            }
            //设置当前的li的背景颜色
            this.className = "current";
            //获取鼠标进入li当前索引值
            index = this.getAttribute("index")
            //调用动画
            animate(ulObj, -index * imgWidth);
        }
    }

    //设置ol中第一个li的背景颜色
    olObj.children[0].className = "current";
    //克隆ul中的第一个li, 追加到ul的最后面
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    //2.自动播放
    var timeId = setInterval(move, 1000);
    //3.鼠标移入显示焦点左右的div, 并清除定时器
    box.onmouseover = function () {
        arr.style.display = "block"
        clearInterval(timeId)
    }
    //3.鼠标移出显示焦点左右的div, 并开启定时器
    box.onmouseout = function () {
        arr.style.display = "none"
        timeId = setInterval(move, 1000);
    }

    //4.点击右边按钮
    my$("right").onclick=move;
    //点击左边按钮
    my$("left").onclick=function () {
        if (index==0){
            index=5;
            ulObj.style.left = -index*imgWidth+"px";
        }
        index--;
        animate(ulObj,-index*imgWidth);

        for (var i=0;i<olObj.children.length;i++){
            olObj.children[i].removeAttribute("class")
        }
        olObj.children[index].className="current";
    }
    //封装自动播放的函数
    function move() {
        if (index == list.length - 1) {
            //瞬间跳转到第一张图
            ulObj.style.left = 0 + "px"
            index = 0;
        }
        index++;
        animate(ulObj, -index * imgWidth);
        //判断按钮的背景颜色 , 如果index = 最后一个值的时候, 瞬间设置第一个的按钮的颜色
        if (index == list.length - 1) {
            //设置第一个li的颜色
            olObj.children[0].className = "current";
            //清除最后一个按钮的颜色
            olObj.children[olObj.children.length-1].className="";
        } else {
            //更改小按钮的样式
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class")
            }
            //设置对应的li的背景颜色
            olObj.children[index].className = "current"
        }
    }


</script>

</body>
</html>