原生js轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

webelieveyou

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量213

点赞数

文章标签： js 轮播图

本文链接：https://blog.csdn.net/webeliveyou/article/details/100533661

版权

下面的灰色圆角可以使用border-radius：宽度的一半；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        .wrap{
            width: 800px;
            height: 400px;
            position: relative;
        }
        .list{
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding: 0;
        }
        .item{
            width: 100%;
            height: 100%;
            color: white;
            font-size: 20px;
            position: absolute;
            opacity:0;
            transition:all 1s;
        }
        .item:nth-child(1){
            background-color: red;
        }
        .item:nth-child(2){
            background-color: green;
        }
        .item:nth-child(3){
            background-color: blue;
        }
        .item:nth-child(4){
            background-color: pink;
        }
        .item:nth-child(5){
            background-color: black;
        }
        .btn{
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }
        #goPre{
            left: 0;
        }
        #goNext{
            right: 0;
        }
        .item.active{
            z-index: 10;
            opacity:1;
        }
        /*小圆点*/
        .pointList{
            padding-left: 20px;
            list-style: none;
            position: absolute;
            right: 325px;
            bottom:20px;
            z-index: 100;
            background-color: grey;
            border-radius: 100px;
            width: 164px;
            text-align: center;

        }
        .point{
            width: 20px;
            height: 30px;
            background-color: white;
            border-radius:100%;
            float: left;
            margin-right: 10px;
            cursor:pointer;
        }
        .point.active{
            background-color: orangered;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <!--接下来是小圆点-->
        <ul class="pointList">
            <li class="point active" data-index="0"></li>
            <li class="point" data-index="1"></li>
            <li class="point" data-index="2"></li>
            <li class="point" data-index="3"></li>
            <li class="point" data-index="4"></li>
        </ul>
        <!--添加按钮-->
        <button type="button" class="btn" id="goPre"><</button>
        <button type="button" class="btn" id="goNext"> > </button>
    </div>
    <script>
    //    这是个数组，想要访问的话想要使用下标
    var items = document.getElementsByClassName('item');//图片
    var points = document.getElementsByClassName('point');//小圆点
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');

    //index表示第几张图片在展示，第index的图片有active这个类
    var index = 0;
    //定时器的图片跳转参数
    var time = 0;
    //第二步
    var clearActive = function(){
        //将active全去掉
        for(var i = 0 ; i < items.length ; i++){
            items[i].className = 'item';
        }
        for(var i = 0 ; i < points.length ; i++){
            points[i].className = 'point';
        }
    }
    //第一步
    var goIndex = function(){
        //先执行clearActive
        clearActive();
        //给自己想要的添加上active
        points[index].className = 'point active';
        items[index].className = 'item active';
    }
    //第四步
    var goNext = function(){
        //要加入判断，li是有限的，要小于最后的索引
        if(index < 4){
            index++;
        }else {
            //跳到最开始的
            index = 0;
        }
        goIndex();
    }
    var goPre = function(){
        if(index == 0){
            index=4
        }else{
            index--;
        }

        goIndex();
    }
    //第三步 点击
    goNextBtn.addEventListener('click',function(){
            goNext();
    })
        goPreBtn.addEventListener('click',function(){
            goPre();
        })

    //    第五步 小圆点
        for(var i = 0 ; i < points.length ; i++){
            //points是个数组，得要是个对象
            points[i].addEventListener('click',function(){
            var pointIndex = this.getAttribute('data-index');
            index = pointIndex;
            goIndex();
            time = 0;
        })
        }
    //    第六步 使用定时器来轮播 2000ms跳转一次

        setInterval(function(){
            time++;
            //到了2秒时，跳转
            if(time == 20){
                goNext();
                time = 0;
            }

        },100)

    </script>
</body>
</html>

webelieveyou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js轮播图

下面的灰色圆角可以使用border-radius：宽度的一半；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> .wrap{ ...
复制链接

扫一扫