js轮播图实现

最新推荐文章于 2024-04-10 14:04:55 发布

风雨等归期

最新推荐文章于 2024-04-10 14:04:55 发布

阅读量160

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/liangmaxmin/article/details/107633132

版权

js基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

之前一直用swiper.js插件写轮播图效果不错,想着自己也写一个练练手

运行

在这里插入图片描述

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

    .wrapper {
        position: relative;
        width: 600px;
        height: 350px;
        margin: 80px auto;
        overflow: hidden;
    }

    .arrow-1, .arrow-2 {
        position: absolute;
        top: 50%;
        width: 20px;
        height: 20px;
        margin-top: -20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        z-index: 1;
        background-color: rgba(0, 0, 0, .3);
    }

    .arrow-1 {
        left: 0;
        border-radius: 0 10px 10px 0;
    }

    .arrow-2 {
        right: 0;
        border-radius: 10px 0 0 10px;
    }

    .circle {
        position: absolute;
        bottom: 15px;
        left: 50%;
        width: 80px;
        height: 14px;
        margin-left: -40px;
        border-radius: 7px;
        background: #CCCCFF;
    }

    .circle li {
        float: left;
        width: 10px;
        height: 10px;
        margin: 2px 5px;
        border-radius: 50%;
        background-color: #fff;

    }

    .circle .current {
        background: cornflowerblue;
    }

    .arrow {
        width: 600%;
        transition: all .8s;
        transform: translateX(-600px);
        overflow: hidden;
    }

    .arrow li {
        float: left;
    }

    .arrow img {
        width: 600px;
        height: 350px;
    }


</style>
<body>
<div class="wrapper">
    <!--左箭头-->
    <a href="javascript: ;" class="arrow-1">&lt;</a>
    <!--右箭头-->
    <a href="javascript: ;" class="arrow-2">&gt;</a>
    <ul class="arrow">
        <li><img src="img/6.jpg"/></li>
        <li><img src="img/7.jpg"/></li>
        <li><img src="img/8.jpg"/></li>
        <li><img src="img/9.jpg"/></li>
    </ul>
    <div class="circle">
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

</body>

<script>

    var arrow = document.querySelector('.arrow');
    var circle = document.querySelector('.circle ul');
    var arrow1 = document.querySelector('.arrow-1');
    var arrow2 = document.querySelector('.arrow-2');
    var lis = arrow.children;
    var wrapper = document.querySelector('.wrapper');
    var clis = circle.children;

    //无缝轮播 深度克隆第一张和最后一张图片
    arrow.appendChild(lis[0].cloneNode(true));
    arrow.insertBefore(lis[3].cloneNode(true), lis[0]);

    //给每个li注入索引号
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index", i);
    }

    var index = 1;

    //向右滑动函数
    function move_r() {
        clis[index_j(index)].classList.remove('current');
        index++;
        clis[index_j(index)].classList.add('current');
        var w = -index * 600 + 'px';
        arrow.style.transition = 'all .8s';
        arrow.style.transform = 'translateX(' + w + ')';
        arrow.addEventListener('transitionend', function () {
            if (index >= 5) {
                index = 1;
                arrow.style.transition = "none";
                arrow.style.transform = 'translateX(-600px)';
            }
        });

    }

    //下面小原点定位
    function index_j(index) {
        if (index === 0) {
            return 3;
        }
        else if (index === 5) {
            return 0;
        } else {
            return index - 1;
        }
    }

    //向左滑动
    function move_l() {
        clis[index_j(index)].classList.remove('current');
        index--;
        clis[index_j(index)].classList.add('current');
        var w = -index * 600 + 'px';
        arrow.style.transition = 'all .8s';
        arrow.style.transform = 'translateX(' + w + ')';
        arrow.addEventListener('transitionend', function () {
            if (index <= 0) {
                index = 4;
                arrow.style.transition = "none";
                arrow.style.transform = 'translateX(-2400px)';
            }
        });

    }

    //定时器 自动向右滑动
    var timer = setInterval(move_r, 3000);

    //鼠标滑过清除定时器
    wrapper.addEventListener('mouseenter', function () {
        clearInterval(timer);
        timer = null;
    });

    //鼠标移除添加定时器
    wrapper.addEventListener('mouseleave', function () {
        timer = setInterval(move_r, 3000);
    })


    //左右滚动点击事件
    arrow2.addEventListener('click', function () {
        move_r();
    })

    arrow1.addEventListener('click', function () {
        move_l();
    })

    //下面小原点点击事件
    var lastone =0;

    //高级排他思想
    for (var i = 0; i < clis.length; i++) {
        (function (i) {

            clis[i].addEventListener('click', function () {
                var w = -(i+1)*600+'px';
                arrow.style.transform = 'translateX(' + w + ')';
                clis[lastone].classList.remove('current');
                clis[i].classList.add('current');
                lastone = i;
            })

        })(i);
    };


</script>


</html>

风雨等归期

关注

0
点赞
踩
1

收藏

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

之前一直用swiper.js插件写轮播图效果不错,想着自己也写一个练练手运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播</title></head><style> * { margin: 0; padding: 0; text-de
复制链接

扫一扫