学习笔记----原生js轮播图

于 2020-08-29 10:11:08 发布
阅读量161 收藏 1
点赞数
分类专栏： js轮播图 文章标签： javascript css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42607483/article/details/108291146
版权

学习笔记----原生js轮播图

全部代码实现：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }

            #roll {
                width: 520px;
                height: 280px;
                border: 2px solid red;
                position: relative;
                margin: 100px auto;
                overflow: hidden;
            }

            #img_o {
                width: 520px;
            }

            #nav {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 10px;
                padding: 0px 4px;
            }

            #nav li {
                height: 8px;
                width: 8px;
                border-radius: 50%;
                background-color: rgb(255, 255, 255);
                float: left;
                margin: 4px 8px;
                cursor: pointer;
            }

            #nav li.change {
                background-color: rgb(255, 255, 0);
            }


            span {
                background-color: rgba(0, 0, 0, 0.582);
                transform: translateY(-50%);
                width: 24px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                color: white;
                /* font-weight: bold; */
                font-size: 20px;
                font-family: '宋体';
                cursor: pointer;
            }

            #next {
                position: absolute;
                right: 0px;
                top: 50%;
            }

            #pre {
                position: absolute;
                left: 0px;
                top: 50%;
            }
        </style>
    </head>

    <body>
        <div id="roll">
            <img src="img/1.jpg" alt="" id="img_o">
            <ol id="nav">
                <li class="change"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            <span id="next" class="ne">></span>
            <span id="pre" class="ne"><</span>
        </div>
        <script>
            var oimg = document.getElementById('img_o');
            var next = document.getElementById('next');
            var pre = document.getElementById('pre');
            var nav = document.getElementById('nav');
            var current = document.getElementById('roll');

            var i = 0;
            var list = [
                'img/1.jpg',
                'img/1.png',
                'img/2.jpg',
                'img/3.jpg',
            ]
            console.log(nav.children.length)
            function ch() {
                for (n = 0; n < nav.children.length; n++) { nav.children[n].removeAttribute('class') }
                nav.children[i].setAttribute('class', 'change'); oimg.setAttribute('src', list[i]);
            } function
                go() {
                    i++; if (i > 3) {
                        i = 0;
                    }
                ch();
                console.log(i);
            }

            var timer = setInterval(go, 5000);

            next.onclick = function () {
                clearInterval(timer);
                i++;
                if (i > 3) {
                    i = 0;
                }
                ch();
                timer = setInterval(go, 5000);
            }

            pre.onclick = function () {
                clearInterval(timer);
                i--;
                if (i < 0) { i = 3; } ch(); timer = setInterval(go, 5000);
            }; current.onmouseenter = function () {
                clearInterval(timer);
            }; current.onmouseleave = function () {
                clearInterval(timer);
                timer = setInterval(go, 5000);
            }; for (n = 0; n < nav.children.length; n++) {
                nav.children[n].setAttribute('index', n); nav.children[n].onclick = function () {
                    clearInterval(timer); i = this.getAttribute('index'); 
                    for (j = 0; j < nav.children.length; j++) { nav.children[j].removeAttribute('class') } nav.children[i].setAttribute('class', 'change'
                    ); 
                    oimg.setAttribute('src', list[i]); 
                    timer = setInterval(go, 5000);
                }
            } </script>
    </body>

</html>

效果图：
在这里插入图片描述
css代码部分：

 * {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }

            #roll {
                width: 520px;
                height: 280px;
                border: 2px solid red;
                position: relative;
                margin: 100px auto;
                overflow: hidden;
            }

            #img_o {
                width: 520px;
            }

            #nav {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 10px;
                padding: 0px 4px;
            }

            #nav li {
                height: 8px;
                width: 8px;
                border-radius: 50%;
                background-color: rgb(255, 255, 255);
                float: left;
                margin: 4px 8px;
                cursor: pointer;
            }

            #nav li.change {
                background-color: rgb(255, 255, 0);
            }


            span {
                background-color: rgba(0, 0, 0, 0.582);
                transform: translateY(-50%);
                width: 24px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                color: white;
                /* font-weight: bold; */
                font-size: 20px;
                font-family: '宋体';
                cursor: pointer;
            }

            #next {
                position: absolute;
                right: 0px;
                top: 50%;
            }

            #pre {
                position: absolute;
                left: 0px;
                top: 50%;
            }

html部分：

<img src="img/1.jpg" alt="" id="img_o">
<ol id="nav">
    <li class="change"></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
<span id="next" class="ne">></span>
<span id="pre" class="ne"><</span>

js部分：

var oimg = document.getElementById('img_o');
var next = document.getElementById('next');
var pre = document.getElementById('pre');
var nav = document.getElementById('nav');
var current = document.getElementById('roll');

var i = 0;
var list = [
   'img/1.jpg',
   'img/1.png',
   'img/2.jpg',
   'img/3.jpg',
]
console.log(nav.children.length)
function ch() {
   for (n = 0; n < nav.children.length; n++) { nav.children[n].removeAttribute('class') }
   nav.children[i].setAttribute('class', 'change'); oimg.setAttribute('src', list[i]);
} function
   go() {
       i++; if (i > 3) {
           i = 0;
       }
   ch();
   console.log(i);
}

var timer = setInterval(go, 5000);

next.onclick = function () {
   clearInterval(timer);
   i++;
   if (i > 3) {
       i = 0;
   }
   ch();
   timer = setInterval(go, 5000);
}

pre.onclick = function () {
   clearInterval(timer);
   i--;
   if (i < 0) { i = 3; } ch(); timer = setInterval(go, 5000);
}; current.onmouseenter = function () {
   clearInterval(timer);
}; current.onmouseleave = function () {
   clearInterval(timer);
   timer = setInterval(go, 5000);
}; for (n = 0; n < nav.children.length; n++) {
   nav.children[n].setAttribute('index', n); nav.children[n].onclick = function () {
       clearInterval(timer); i = this.getAttribute('index'); 
       for (j = 0; j < nav.children.length; j++) { nav.children[j].removeAttribute('class') } nav.children[i].setAttribute('class', 'change'
       ); 
       oimg.setAttribute('src', list[i]); 
       timer = setInterval(go, 5000);
   }
}

这个轮播图是利用定时器的功能改变图片的路径达到的效果，想增加图片就再js部分得list数组里加上对应图片得路径，基本有多少张图片html部分的li标签就对应有几个

扣肉馅饺子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值