纯原生javascript手写轮播图案列

置顶 awk_bioinfo

已于 2022-02-28 19:41:47 修改

阅读量137

点赞数

分类专栏：前端文章标签： javascript css css3

于 2022-02-28 16:18:31 首次发布

本文链接：https://blog.csdn.net/qq_36608036/article/details/123185363

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

纯原生javascript手写轮播图案列代码，欢迎交流学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            display:flex;
            justify-content: center;
            align-items:center;
            height: 100vh;
        }
        .box {
            position: relative;    
            /* top: 50%;
            left: 50%;
            transform: translate(-50%,-50%); */
            width: 800px;
            height: 433px;
            overflow: hidden;  /* 清除浮动 */
            background: #fff;
            white-space: nowrap;
            
        }
        .image {
            width: 800px;
            height: 400px;
        }
        .image li {
            list-style: none;
            overflow: hidden;
            position: absolute;
            display: none;
        }
        .num {
            height: 30px;
            width: 400px;
            margin-left: 60%;

            transform: translateX(-50%);
            overflow: hidden;
            margin-top: -32px;
            z-index: 1;
        }
        .num li {
            width: 30px;
            height: 30px;
            background: #fff;
            float: left;
            list-style: none;
            font-size: 28px;
            margin: 0px 7px;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            z-index: 2;
        }

        .active {
            display: block;
        }

        .arrow{
            height: 60px;
            width: 30px;
            position: absolute;
            cursor: pointer;
            background-color: black;
            color: white;
            opacity: 0.5;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
            top: 197px;
            /* display: none; */
            z-index: 6;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="image">
            <li><img src="images/1.png" alt=""></li>
            <li><img src="images/2.png" alt=""></li>
            <li><img src="images/3.png" alt=""></li>
            <li><img src="images/4.png" alt=""></li>
            <li><img src="images/5.png" alt=""></li>
        </ul>
        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="left arrow"></div>
        <div class="right arrow"></div>
    </div>

    <script>
        var boxs = document.getElementsByClassName('box');
        var imgs_li = document.querySelectorAll(".image li");
        var nums_li = document.querySelectorAll(".num li");
        var left = document.getElementsByClassName('left');
        var right = document.getElementsByClassName('right');
        var i=0;
        var timer = null;
        var sums = nums_li.length;

        imgs_li[0].style.display='block';
        nums_li[0].style.background='red';

        function cgpic(m){
            for(let i=0;i<imgs_li.length;i++){
                imgs_li[i].style.display='none';
            }
            imgs_li[m].style.display='block';
            imgs_li[m].animate([
                { opacity:0.4},
                { opacity:1}
            ],{ 
                duration:2000,
            });
        }
        
        function cgnum(m){
            for(let i=0;i<sums;i++){
                nums_li[i].style.background='#fff';
            }
            nums_li[m].style.background='red';
        }

        startmove = function(){
            timer = setInterval(() => {
                if(i<sums-1){
                    i+=1
                }else{
                    i=0
                }
                cgpic(i)
                cgnum(i)
            }, 2000);
        }
        startmove();


        boxs[0].onmouseover = function(){
            clearInterval(timer);
        }
        boxs[0].onmouseout = function(){
            startmove();
        }

        for(let j=0;j<sums;j++){
            nums_li[j].onclick=function(){
                cgnum(j);
                cgpic(j);
                i=j;
            };
        }
        left[0].onclick=function(){
            // if(timer !='null'){
            //     clearInterval(timer);
            // }
            if(i>0){
                i-=1;
            }else{
                i=sums-1;
            }
            cgnum(i);
            cgpic(i);
            // startmove();
        };
        right[0].onclick=function(){
            if(i<sums-1){
                i+=1;
            }else{
                i=0;
            }
            cgnum(i);
            cgpic(i);
        };
    </script>
</body>
</html>

awk_bioinfo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
纯原生javascript手写轮播图案列

纯原生javascript手写轮播图案列代码，欢迎交流学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫

专栏目录