JavaScript怎么实现轮播图

这篇文章主要介绍"JavaScript怎么实现轮播图"，在日常操作中，相信很多人在JavaScript怎么实现轮播图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"JavaScript怎么实现轮播图"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

html 和 css 代码如下所示（文件名：index.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怎么实现轮播图"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！