js轮播图

坤坤多吃点儿。

已于 2022-08-05 22:41:24 修改

阅读量111

点赞数

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

于 2022-08-04 18:18:49 首次发布

本文链接：https://blog.csdn.net/m0_51614469/article/details/126164453

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

仿京东轮播图，如下图：
需求:

鼠标移入左下角小圆点，图片轮播
鼠标点击左右按钮，图片轮播
自动轮播，当鼠标移入轮播图盒子，停止自动轮播，鼠标移出，继续自动轮播
节流阀，防止连续点击

知识储备

setAttribute('属性名','属性值') 给DOM元素添加自定义属性，案例中是给每个小圆圈添加自定义属性index，为了方便获取索引
getAttribute('属性名') 获取属性
元素.appendChild(元素) 追加节点
setInterval(callback,time) 定时器，两个参数，第一个参数是回调函数，第二个参数是时间间隔，以毫秒为单位
clearInterval 取消定时器

html

		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>index</title>
		    <script src="animate.js"></script> <!-- 缓动动画函数 -->
		    <script src="index.js"></script> <!-- js -->
		</head>
		<body>
		    <div class="box">
		        <ul>
		            <li><img src="images/1.jpg" alt=""></li>
		            <li><img src="images/2.jpg" alt=""></li>
		            <li><img src="images/3.jpg" alt=""></li>
		            <li><img src="images/4.jpg" alt=""></li>
		            <li><img src="images/5.jpg" alt=""></li>
		            <li><img src="images/6.jpg" alt=""></li>
		        </ul>
		        <span class="lt-btn btn"><</span>
		        <span class="rt-btn btn">></span>
		        <ol></ol>
		    </div>
		</body>
		</html>

css

		.box{
            width: 590px;
            height: 470px;
            margin: 200px auto;
            overflow: hidden;
            position: relative;
        }
        ul{
            width: 600%;
            height: 100%;
            list-style: none;
            padding:0;
            position: absolute;
        }
        ul>li{
            float: left;
        }
        .btn{
            width: 25px;
            height: 35px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            line-height: 35px;
            color: #eeeeee;
            font-size: 12px;
            font-weight: bold;
            background: rgba(0,0,0,.1);
            cursor: pointer;
        }
        .btn:hover{
            background: rgba(0,0,0,.3);
            transition: all 1s;
        }
        .lt-btn{
            border-radius: 0 25px 25px 0;
        }
        .rt-btn{
            right: 0;
            border-radius: 25px 0 0 25px ;
        }
        ol{
            list-style: none;
            padding: 0;
            display: flex;
            position: absolute;
            left: 30px;
            bottom: 30px;
            margin: 0;
        }
        ol>li{
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255,255,255,.7);
            margin-right: 5px;
        }
        ol>.is-active{
            background: #fff;
        }

轮播图js

window.onload = function(){
    // 获取元素
    let box = $('.box');
    let ul = $('ul');
    let ol = $('ol');
    let imgList = ul.querySelectorAll('img');
    let ltBtn = $('.lt-btn');
    let rtBtn = $('.rt-btn');
    let flag = true; // 节流阀
    let currentIndex = 0; // 轮播图索引，默认是0

    // 遍历所有图片 动态生成小圆圈
    for(let i = 0,len = imgList.length;i < len;i ++){
        let li = document.createElement('li'); // 创建li节点
        li.setAttribute('data-index',i); // 给每个li节点（小圆圈）添加自定义属性，为了更方便的获取index
        ol.appendChild(li); // 将li(小圆圈)追加到ol里面
        // 给每一个小圆点添加鼠标移入事件
        li.addEventListener('mouseenter',function(){
            // 节流阀 防止用户多次点击左右按钮或者小圆圈
            if(flag){
                flag = false;
                currentIndex = this.getAttribute('data-index'); // 轮播图索引修改成当前被移入的小圆圈索引
                change(); // 轮播图改变
            }
        });
    }

    let circleList = ol.querySelectorAll('li'); // 获取小圆圈列表
    circleList[currentIndex].className = 'is-active'; // 当前轮播图所对应的小圆圈高亮显示

    // 右侧按钮添加点击事件
    rtBtn.addEventListener('click',function(){
        if(flag){ // 节流阀
            flag = false;
            if(currentIndex == imgList.length - 1) // 如果当前图片为最后一张，将轮播图索引设置为0，即显示第一张轮播图
                currentIndex = 0;
            else
                currentIndex ++; // 否则，自增1
            change(); // 轮播图改变
        }
    })

    // 左侧按钮添加点击事件
    ltBtn.addEventListener('click',function(){
        if(flag){ // 节流阀
            flag = false;
            if(currentIndex == 0) // 如果轮播图索引为0，则设置为最后一张
                currentIndex = imgList.length - 1;
            else
                currentIndex --; // 否则，自减1
            change(); // 轮播图改变
        }
    })

    // 轮播图盒子添加鼠标移入事件，停止自动轮播  清除计时器
    box.addEventListener('mouseenter',function(){
        clearInterval(timer);
        timer = null;
    })

    // 轮播图盒子添加鼠标移出事件，继续自动轮播
    box.addEventListener('mouseleave',function(){
        let timer = setInterval(function(){
            rtBtn.click();
        },3000)
    })

    // 轮播图改变
    function change(){
        flag = false;
        // 遍历所有小圆圈，改为默认样式
        for(let i = 0,len = circleList.length;i < len;i ++){
            circleList[i].className = '';
        }
        // 当前显示轮播图对象小圆圈高亮
        circleList[currentIndex].className = 'is-active';

        // 缓动动画函数 animation(obj,target,callback)
        animation(ul,- currentIndex * imgList[0].offsetWidth,function(){
            flag = true;
        });
    }

    // 自动轮播
    let timer = setInterval(function(){
        rtBtn.click();
    },3000)
}

// 获取元素
function $(obj){
    return document.querySelector(obj);
}

缓动动画js

function animation(obj,target,callback){
    clearInterval(obj.timer);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    obj.timer = setInterval(function(){
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
            callback();
        }
        else
            obj.style.left = obj.offsetLeft + step + 'px';
    },30)
}