JS制作轮播图-CSDN博客

本文链接：https://blog.csdn.net/pumpkin___/article/details/131134819

该文章展示了一个使用HTML结构、CSS样式和JavaScript脚本来创建轮播图的示例。通过监听鼠标进入和离开事件来显示/隐藏控制按钮，并实现了自动播放和手动点击切换图片的功能。此外，还包含了动态生成小圆点作为当前图片指示器的逻辑。

摘要由CSDN通过智能技术生成

最终效果：

轮播图制作

html:

<!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>Document</title>
    <!-- css -->
    <link rel="stylesheet" href="./css/index.css">
  
    <!-- animate必须写在index的上面 -->
    <!-- 用动画必须要有定位 -->
    <script src="./js/animate.js"></script>
    <!-- js -->
   <script src="./js/index.js"></script>
    

</head>
<body>
    <div class="fatherbox">
        <!-- 左侧按钮 -->
        <a href="#" class="left-aside"><img src="./img/left.jpg" alt=""></a>

        <!-- 右侧按钮 -->
        <a href="#" class="right-aside"><img src="./img/right.jpg" alt=""></a>

          <!-- 滚动区域 -->
        <ul>
            <li>
                <img src="./img/06.jpg" alt="">
                
            </li>
            <li>
                <img src="./img/07.jpg" alt="">
                
            </li>
            <li>
                <img src="./img/08.jpg" alt="">
                
            </li>
            <li>
                <img src="./img/09.jpg" alt="">
                
            </li>
            <li>
                <img src="./img/10.jpg" alt="">
                
            </li>
            <li>
                <img src="./img/11.jpg" alt="">
            </li>
        </ul>

          <!-- 小圆圈 -->
          <ol class="circle">
           
          </ol>


    </div>
    
</body>
</html>

index.css


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

.fatherbox {
    width: 860px;
    height: 480px;
    background-color: skyblue;
    margin: 200px auto;
    overflow: hidden;
    position: relative;
}

.left-aside {
    position: absolute;
    top: 200px;
    z-index: 10;
    /* display: none; */
}

.right-aside {
    position: absolute;
    right: 0;
    top: 200px;
    z-index: 10;
    /* display: none; */
  
}
.fatherbox ul {
    position: absolute;
    top: 0;
  
    width: 700%;
}

.fatherbox ul li {
    float: left;
}

.circle {
    position: absolute;
    bottom: 20px;
    left: 350px;  
}

.fatherbox ol li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid white;
    float: left;
    margin-left: 5px;
}

.current {
    background-color: white;
}

index.js

window.addEventListener('load',function(){
    //获取元素
    var l_a =this.document.querySelector('.left-aside')
    var r_a =this.document.querySelector('.right-aside')
    var fatherbox = document.querySelector('.fatherbox')
    var fatherboxWidth = fatherbox.offsetWidth

    fatherbox.addEventListener('mouseenter',function(){
        l_a.style.display = 'block'
        r_a.style.display = 'block'
        clearInterval(timer)
        timer = null //清除定时器变量
    })

    
    fatherbox.addEventListener('mouseleave',function(){
        l_a.style.display = 'none'
        r_a.style.display = 'none'

        timer = setInterval(function() {
            r_a.click()
         },2000)

    })

    //动态生成小圆圈
    var ul = fatherbox.querySelector('ul')
    var ol = fatherbox.querySelector('.circle')

    for(var i= 0 ; i< ul.children.length;i++){
        var li = document.createElement('li')
        //记录当前小圆圈的索引号，通过自定义属性
        li.setAttribute('index',i)
        ol.appendChild(li)
        li.addEventListener('click',function(){
            //排他思想 循环清除其他所有人的类
            for (var i = 0 ;i<ol.children.length;i++) {
                ol.children[i].className = ''
            }
            //给自己添加类
            this.className = 'current'
            //点击小圆圈，移动图片 移动的是ul
            var index = this.getAttribute('index')
            num = index
            circle = index
            console.log(fatherboxWidth)
            console.log(index)
            animate(ul,-index * fatherboxWidth )
        })
    }
    ol.children[0].className = 'current'

    //克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first)

    //circle 控制小圆圈的播放
    var circle = 0
    //点击右侧按钮，图片滚动一张
    var num = 0
    // 节流阀
    var flag = true
    //右侧按钮
    r_a.addEventListener('click',function(){
       if(flag) {
        flag = false
        if(num == ul.children.length - 1) {
            ul.style.left = 0
            num = 0
        }
        num++
        animate(ul, -num * fatherboxWidth,function() {
            flag = true
        })

        //点击按钮小圆圈跟着变
        circle++

        //如果circle ==4 到克隆的这张图片
        if(circle == ol.children.length){
            circle =0
        }
        circleChange()
       }

    })

    //左侧按钮
    l_a.addEventListener('click',function(){
        if(flag) {
            flag = false
            if(num == 0) {
                num = ul.children.length - 1
                ul.style.left = -num * fatherboxWidth + 'px'
                
            }
            num--
            animate(ul, -num * fatherboxWidth,function(){
                flag = true
            })
    
            //点击按钮小圆圈跟着变
            circle--
    
            //如果circle <0 把小圆圈放在第四个上面
            // if(circle <0){
            //     circle =ol.children.length-1
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle
            circleChange()
        }
       

    })

     //清除其余的小圆圈
     function circleChange(){
        for(var i = 0; i<ol.children.length; i++){
            ol.children[i].className = ''
        }
        //当前的小圆圈写类名
        ol.children[circle].className = 'current'
     }


     //自动播放功能
     var timer = setInterval(function() {
        //手动调用事件
        r_a.click()
     },2000)

    
})

animate.js (封装动画效果)

function animate(obj, target,callback) {
    //清除以前的定时器，在添加新的定时器
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        //把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10
         step = step > 0? Math.ceil(step) : Math.floor(step)
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)
            //回调函数
            if(callback) {

                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 30)
}