编程 Javascript

关于JavaScript轮播图的实现

Posted in Javascript onNovember 20, 2021

今天又是一个非常实用的案例哟，听名字就觉得高级很难对吧，今天就来写一个案例，让你轻松学到轮播图的精髓！！

学习轮播图的首先是要把图片准备好，并且用 ul 的里面的 li 包起来，给 li 一个浮动，让他们显示在一行上，但是注意了，一定要给 ul 足够的宽哦！！

来吧，html 和 css 代码如下所示（文件名：index.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>
    <script src="animate.js"></script>
    <script src="轮播图.js"></script>
    <style>
        body {
            background-color: rgb(151, 147, 147);
        }
 
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            overflow: hidden;
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
        }
 
        ul {
            list-style: none;
        }
 
        .img {
            width: 600%;
            position: absolute;
            left: 0;
        }
 
        li {
            float: left;
        }
 
        img {
            width: 500px;
            height: 500px;
        }
 
        .yuan>li {
            cursor: pointer;
            width: 10px;
            height: 10px;
            background-color: rgb(190, 185, 185);
            border-radius: 50%;
            margin: 0 5px;
            border: 1px solid rgb(119, 114, 114);
        }
 
        .yuan {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
 
        .yuan .color {
            background-color: rgb(228, 135, 135);
        }
 
        a {
            text-decoration: none;
            color: black;
            background-color: rgb(112, 111, 111);
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }
 
        .left {
            left: 0;
        }
 
        .right {
            right: 0;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <ul class="img">
            <li><img src="images/1.webp" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.webp" alt=""></li>
            <li><img src="images/4.webp" alt=""></li>
            <li><img src="images/5.webp" alt=""></li>
        </ul>
        <a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="left">&lt;</a>
        <a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
        <ul class="yuan"></ul>
    </div>
</body>
 
</html>

这样写好以后，一个基本的样子就算是有了。

接下来就是让他动起来，想想什么可以让图片动起来，是不是我们学过的动画效果呀，所有这个地方要用缓动动画来实现一个切换图片的效果，因为 js 代码较多，所以得新建一个 js 文件，把代码封装起来！

下面就是封装得 js 代码（文件名：轮播图.js）

window.addEventListener('load', function () {
    var img = document.querySelector('.img');
    var yuan = document.querySelector('.yuan');
    var box = document.querySelector('.box');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var imgwidth = box.offsetWidth;  //获取盒子的宽度（图片的宽度）
    // 经过鼠标触发 停止自动滚动图片效果
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
    })
    // 离开鼠标触发 自动滚动图片再次触发
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            right.click();
        }, 2000)
    })
    // 根据图片添加下面的小圆点
    for (var i = 0; i < img.children.length; i++) {
        var li = document.createElement('li');
        yuan.appendChild(li);
        li.setAttribute('date-index', i);
        li.addEventListener('click', function () {
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            this.className = 'color';
            var index = this.getAttribute('date-index');
            var imgwidth = box.offsetWidth;
            // animate(obj,target,function(){})
            animate(img, -index * imgwidth);
            nums = index;
            colors = index;
        })
    }
    // 默认第一个小圆点有颜色
    yuan.children[0].className = 'color';
    var nums = 0;
    var colors = 0;
    // 复制第一张图片到最后,给无缝滚动做准备
    var li = img.children[0].cloneNode(true);
    img.appendChild(li);
    var flag = true;
    //右边按钮,切换下一张,小圆点一起变化
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (nums == img.children.length - 1) {
                nums = 0;
                img.style.left = 0;
            }
            nums++;
            animate(img, -nums * imgwidth, function () {
                flag = true;
            });
            colors++;
            if (colors == yuan.children.length) {
                colors = 0;
            }
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 左边按钮,切换下一张,小圆点一起变化
    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (nums == 0) {
                nums = img.children.length - 1;
                img.style.left = -nums * imgwidth + 'px';
            }
            nums--;
            colors--;
            animate(img, -nums * imgwidth, function () {
                flag = true;
            });
            if (colors < 0) {
                colors = yuan.children.length - 1;
            }
            // if (colors == 0) {
            //     colors = yuan.children.length;
            // }
            // colors--;
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 鼠标不经过图片实现自动滚动
    var timer = setInterval(function () {
        right.click();
    }, 2000)
})

关键的来了，要让动起来怎么少得了动画效果呢，我单独封装了一个 js 文件，这样以后写其他案例的时候也可以直接引用了。

代码如下（文件名：animate.js）

function animate(obj, target, callback) {  //移动的对象(谁移动)，移动的目的位置，回调函数
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长写到定时器里面
        var step = (target - obj.offsetLeft) / 10; //步长公式：(目标位置-现在的位置)/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';
    },15)
}

基本上都用注释写清楚了，应该能每一步都看得懂了。

到此这篇关于关于JavaScript轮播图的实现的文章就介绍到这了,更多相关轮播图的实现内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

关于JavaScript轮播图的实现

- Author -

靠技术吃饭

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

Jun 28 Javascript

JavaScript中创建类/对象的几种方法总结

Nov 29 Javascript

全面兼容的javascript时间格式化函数(比较实用)

May 14 Javascript

jquery trigger伪造a标签的click事件取代window.open方法

Jun 23 Javascript

jQuery设置和移除文本框默认值的方法

Mar 09 Javascript

Node.js开发者必须了解的4个JS要点

Feb 21 Javascript

微信开发微信授权详解

Oct 21 Javascript

javascript中的深复制详解及实例分析

Dec 29 Javascript

JavaScript提高加载和执行效率的方法

Feb 03 Javascript

Angular2入门--架构总览

Mar 29 Javascript

浅谈关于.vue文件中style的scoped属性

Aug 19 Javascript

Angular通过指令动态添加组件问题

Jul 09 Javascript

JavaScript的function函数详细介绍

JavaScript文档对象模型DOM

Nov 20 #Javascript

四十九个javascript小知识实用技巧

Nov 20 #Javascript

js不常见操作运算符总结

Nov 20 #Javascript

javascript的setTimeout()使用方法总结

Nov 20 #Javascript

JavaScript异步操作中串行和并行

Nov 20 #Javascript

vue中 this.$set的使用详解