关于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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 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的使用详解
You might like
PHP5 安装方法
2007/01/15 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
eclipse php wamp配置教程
2016/06/30 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
解决Django连接db遇到的问题
2019/08/29 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python中pass的作用与使用教程
2020/11/13 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
自主招生自荐信范文
2013/12/04 职场文书
会计找工作求职信范文
2013/12/09 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
工伤私了协议书范本
2014/11/24 职场文书
还款承诺书范本
2015/01/20 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2015党建工作简报
2015/07/21 职场文书
百年校庆感言
2015/08/01 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python