关于JavaScript轮播图的实现

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

还是老规矩，来看一下实现效果！！

学习轮播图的首先是要把图片准备好，并且用 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轮播图的实现的文章就介绍到这了,更多相关轮播图的实现内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！