js运动（轮播图）

最新推荐文章于 2021-10-02 00:23:23 发布

GofAnderson

最新推荐文章于 2021-10-02 00:23:23 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript js运动

本文链接：https://blog.youkuaiyun.com/GofAnderson/article/details/79832860

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

js运动

3 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的轮播图生成器实现方案。该方案通过自定义HTML结构，结合JavaScript进行图片切换及动画效果处理，实现了轮播图的基本功能。此外，还包含了左右切换按钮和指示器的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- - 轮播图
  - 轮播图生成器

轮播图

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./move.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper{
            position: relative;
            margin: 100px auto 0;
            width: 400px;
            height: 250px;
            /* border: 1px solid #000; */
            overflow: hidden;
        }
        .wrapper .sliderPage{
            position: absolute;
            left: 0;
            top: 0;
            height: 250px;
            width: 2000px;
        }
        .wrapper .sliderPage li{
            width: 400px;
            height: 250px;
            float: left;
        }
        .wrapper .sliderPage li img{
            width: 100%;
            height: 100%;
        }

        .wrapper .btn{
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            color: #fff;
            background: #000;
            text-align: center;
            line-height: 40px;
            opacity: 0.1;
            cursor: pointer;
        }
        .wrapper .btn:hover{
            opacity: 0.7;
        }
        .wrapper .left-btn{
            left: 15px;
        }
        .wrapper .right-btn{
            right: 15px;
        }
        .wrapper .sliderIndex{
            position: absolute;
            width: 100%;
            bottom: 15px;
            text-align: center;
            cursor: pointer;
        }
        .wrapper .sliderIndex span{
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #ccc;
            border-radius: 50%;
            margin-right: 10px;
        }
        .wrapper .sliderIndex .active{
            background-color: #f40;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <ul class="sliderPage">
        <li>
            <img src="./img/七天入门国画.jpg" alt="">
        </li>
        <li>
            <img src="./img/初识画板.jpg" alt="">
        </li>
        <li>
            <img src="./img/彩铅入门-萌宠绘.jpg" alt="">
        </li>
        <li>
            <img src="./img/花里胡哨的艺术拼贴.jpg" alt="">
        </li>
        <li>
            <img src="./img/七天入门国画.jpg" alt="">
        </li>
    </ul>

    <div class="btn left-btn"> &lt; </div>
    <div class="btn right-btn"> &gt; </div>
    <div class="sliderIndex">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

<script>
    var timer = null;
    var sliderPage = document.getElementsByClassName('sliderPage')[0];
    var moveWidth = sliderPage.children[0].offsetWidth;
    var num = sliderPage.children.length -1;
    var leftBtn = document.getElementsByClassName('left-btn')[0];
    var rightBtn = document.getElementsByClassName('right-btn')[0];
    var lock = true;
    var index = 0;
    var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');

    //dirction
    //默认方向/点击right按钮  'left->right ' 或者 undefined 什么都不传
    // 点击left按钮 'right->left'
    function autoMove(dirction) {
        //默认方向，从左向右轮播
        if(lock) {
            lock = false;
            clearTimeout(timer); //解决定时器争抢
            if(!dirction || dirction == 'left->right') {
                index++;
                startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function () {
                    if(sliderPage.offsetLeft == -num * moveWidth) {
                        index = 0;
                        sliderPage.style.left = '0px';
                    }
                    timer = setTimeout(autoMove, 1500);
                    lock = true;
                    changeIndex(index);
                });
            }else if(dirction  == 'right->left') {
                if(sliderPage.offsetLeft == 0) { //判断，点击时的位置是否为0；
                    sliderPage.style.left = -num * moveWidth + 'px';
                    index = num;
                }
                index--;
                startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
                    timer = setTimeout(autoMove, 1500);
                    lock = true;
                    changeIndex(index);
                })
            }
        }
    }

    leftBtn.onclick = function () {
        autoMove('right->left');
    }

    rightBtn.onclick = function () {
        autoMove('left->right');
    }

    function changeIndex(_index) {
        for(var i = 0; i < oSpanArray.length; i++) {
            oSpanArray[i].className = '';
        }
        oSpanArray[_index].className = 'active';
    }

    for(var i = 0; i < oSpanArray.length; i++) {
        (function (myIndex) {
            oSpanArray[i].onclick = function () {
                console.log(myIndex);
                lock = false;
                clearTimeout(timer);
                index = myIndex;
                startMove(sliderPage, {left: -index * moveWidth}, function () {
                    lock = true;
                    timer = setTimeout(autoMove, 1500);
                    changeIndex(index);
                });
            }
        })(i)
    }

    timer = setTimeout(autoMove, 1500)

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