关于JavaScript轮播图的实现

2024-12-03 16:56:51

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

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

学习轮播图的首先是要把图片准备好，并且用 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仿小米轮播图效果

本文是自己仿写的小米轮播图的写法,通过透明度改变进行轮播的,新手,写的可能不是很好,有啥不合理的情况,望提出,指正,全部的代码放最下面有很多写法重复,有空的时候,我把重复的代码封装一下关于透明度渐变的动画效果比如 delayOpacity(OliArray[pre],0,-0.1); 就是将OliArray[pre]这个对象的透明度转换成0,速度为0.1 function delayOpacity(obj,target,speed){ clearInterval(timer); timer
原生JS实现呼吸轮播图

今天给大家分享一个用原生JS实现的呼吸轮播图,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生JS实现呼吸轮播图</title> <style> ul { margin: 0; padding-left: 0; } li { list-style: none; } img {
js实现3D轮播图效果

本文实例为大家分享了js实现3D轮播图效果的具体代码,供大家参考,具体内容如下主要有平移和旋转构成3d效果的轮播图,小白一只,不足之处还请大家多多指教,代码如下 css代码: *{ padding: 0; margin: 0; } .box{ position: relative; width: 100%; height: 100%; top: 200px; margin: auto; } .warpper{ position: absolute; width: 100%; height: 1
JS实现轮播图小案例

本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下分析: 点击左右箭头滑动轮播图鼠标不在轮播图内时每隔2秒自动滑动轮播图鼠标移入时停止自动滑动轮播图点击小圆圈显示对应的轮播图 1.鼠标移入.移出显示或隐藏左右箭头: // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r')
js制作轮播图效果

轮播图在前端开发中我认为是一个比较重要的点,因为包含了很多原生js知识点,以下是我学习制作轮播图的过程难点: 1.如何让底下圆圈和图片所对应自动动态生成 2.如何让底下圆圈和图片所对应的起来 3.上一页和下一页所在盒子所移动的距离 4.图片切换时的渐出动画效果 5.节流阀的概念效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
JS实现轮播图效果的3种简单方法

本文实例为大家分享了3种方法实现JS轮播图效果的具体代码,供大家参考,具体内容如下 Js实现轮播图01 实现思路这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg-,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果.代码如下: 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q
纯js实现轮播图效果

本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下结合我们前面学过的:鼠标监听事件(移入移出.点击),创建节点,排他思想.定时器等,就可以实现一个能手动和自动播放的轮播图效果图代码 1. css /*清除元素默认的内外边距 */ * { margin: 0; padding: 0 } body{ width: 1000px; margin: 0 auto; } /*去掉列表前面的小点*/ li { list-style: none; } /*图片没有边框去掉图片底
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on
关于JavaScript轮播图的实现

今天又是一个非常实用的案例哟,听名字就觉得高级很难对吧,今天就来写一个案例,让你轻松学到轮播图的精髓!! 还是老规矩,来看一下实现效果!! 学习轮播图的首先是要把图片准备好,并且用 ul 的里面的 li 包起来,给 li 一个浮动,让他们显示在一行上,但是注意了,一定要给 ul 足够的宽哦!! 来吧,html 和 css 代码如下所示(文件名:index.html) <!DOCTYPE html> <html lang="en"> <head> &l
原生JavaScript轮播图实现方法

本文实例为大家分享了JavaScript轮播图的实现方法,供大家参考,具体内容如下效果截图: 注:div容器大小和图片路径可以自行设置,添加img和a标签后浏览器可以自适应. 创建image文件夹存放图片写入html文本 <body> //图片路径可以自己更改 <div id="outer"> <ul id="imglist"> <li><img src="image/8.jpg" al
JavaScript轮播图简单制作方法

本文实例为大家分享了JavaScript制作轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <style> .co
JavaScript 实现轮播图特效的示例

效果展示 1.页面截图 2.相关效果 html 页面从微信读书上找了几张书籍封面来做轮播的图片. index.html <body> <div id="container"> <div class="big_pic_div"> <div class="prev"></div> <div class="next"></div> <a hr
JavaScript实现轮播图效果

要求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理图片播放的同时,下面小圆圈模块跟随一起变化点击小圆圈,可以播放相应图片鼠标不经过轮播图,轮播图也会自动播放图片鼠标经过,轮播图模块,自动播放停止代码实现: autoPlay.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html lang="en"> <head> <meta
轮播图组件js代码

本文实例为大家分享了JavaScript轮播图组件代码,供大家参考,具体内容如下 //轮播图组件 function Rolling(o) { this.index = ++o.index || 1; //当前滚动的位置,当index大于可轮播的次数listLength或者等于0,为不可滚动状态 this.num = o.num || 1; //默认滚动一个列表 this.obj = o.obj || null; //要轮播的对象ul this.perObj = o.perObj || null;
原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮
javascript经典特效分享手风琴、轮播图、图片滑动

最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:
基于JavaScript实现轮播图代码

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

关于JavaScript轮播图的实现

相关推荐

随机推荐