关于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 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
详解vue渲染从后台获取的json数据
Jul 06 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 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
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
python 爬取微信文章
2016/01/30 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python入门教程之基本算术运算符
2020/11/13 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
工程安全员岗位职责
2014/03/09 职场文书
监察建议书范文
2014/03/12 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
企业负责人任命书
2014/06/05 职场文书
手术室护士个人总结
2015/02/13 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
德劲DE1108畅想
2021/04/22 无线电