【Web】Web-API（No.71）原生js实现滑动轮播图

最新推荐文章于 2023-05-02 11:39:46 发布

Sherry Lupus

最新推荐文章于 2023-05-02 11:39:46 发布

阅读量271

点赞数

分类专栏： Web-API Web-JavaScript 文章标签： Web API JavaScript

本文链接：https://blog.csdn.net/qq_43251850/article/details/99413386

版权

Web-JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Web-API

16 篇文章 0 订阅

订阅专栏

原生js实现滑动轮播图

在这里插入图片描述
需要素材点击图片联系我或私信、评论

<!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 id="scrren" class="screen"><!--相框-->
        <ul id="uu">
            <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 id="oo">
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
    var scrren = my$("scrren");//相框
    var imgWidth = scrren.offsetWidth;//相框的宽度
    var ulObj = my$("uu");//ul
    var list = my$("uu").getElementsByTagName("li");//所有的li节点
    var olObj = my$("oo");//ol
    var btnBox = my$("arr");//左右两边按钮的盒子

    //1、创建小按钮，根据小按钮切换对应的图片
    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 () {
            //先干掉所有li的背景颜色
            for (var j = 0; j < olObj.children.length - 1; j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className = "current";
            //获取对应的索引
            index = this.getAttribute("index");
            //移动ul
            animate(ulObj,-index * imgWidth);
        }
    }
    //设置ol中第一个li默认有背景颜色
    olObj.firstElementChild.className = "current";

    //2、自动播放
    //克隆一个ul的第一张图片，添加到最后面去
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    var timeId = setInterval(move,1000);
    var index = 0;
    function move() {
        if (index >= list.length - 1){
            //直接跳转第一个图片
            index =0;
            ulObj.style.left = "0px";
        }
        index++;
        animate(ulObj,-index * imgWidth);
        //判断小圆点
        if (index == list.length - 1){
            //干掉最后一个按钮颜色
            olObj.children[olObj.children.length - 1].className = "";
            //给第一个按钮设置颜色
            olObj.children[0].className = "current";
        } else{
            //先干掉所有li的背景颜色
            for (var j = 0; j < olObj.children.length - 1; j++){
                olObj.children[j].removeAttribute("class");
            }
            olObj.children[index].className = "current";
        }
    }

    //3、鼠标移入移出
    my$("box").onmouseover = function () {
        btnBox.style.display = "block";
        clearInterval(timeId);
    }
    my$("box").onmouseout = function () {
        btnBox.style.display = "none";
        timeId = setInterval(move,1000);
    }

    //4、点击两边按钮
    my$("right").onclick = move;
    my$("left").onclick = function () {
        if (index == 0){
            index = list.length - 1;
            ulObj.style.left = -index * imgWidth + "px";
        }
        index--;
        animate(ulObj,-index * imgWidth);
        //先干掉所有li的背景颜色
        for (var j = 0; j < olObj.children.length - 1; j++){
            olObj.children[j].removeAttribute("class");
        }
        olObj.children[index].className = "current";
    }
</script>
</body>
</html>

Sherry Lupus

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【Web】Web-API（No.71）原生js实现滑动轮播图

原生js实现滑动轮播图需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * {...
复制链接

扫一扫