使用原生 js 实现 轮播图的效果

最新推荐文章于 2022-10-11 12:52:27 发布
最新推荐文章于 2022-10-11 12:52:27 发布
阅读量173 收藏
点赞数 1
分类专栏： 前端小功能 js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wrj6811/article/details/105625248
版权

页面布局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #666;
        }
        
        header {
            width: 100%;
            height: 200px;
            /* background-color: pink; */
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        header img {
            width: 70%;
            height: 200px;
            display: block;
            margin: 0 auto;
        }
        
        .inner {
            width: 500px;
            height: 300px;
            background-color: pink;
            overflow: hidden;
            margin: 10px auto;
            position: relative;
        }
        
        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .lunbo li {
            float: left;
        }
        
        .inner li img {
            width: 500px;
            height: 300px;
        }
        
        .circle {
            height: 15px;
            width: 100px;
            position: absolute;
            top: 90%;
            left: 50%;
            cursor: pointer;
            transform: translate(-50%, -50%);
        }
        
        .circle li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            margin-left: 3px;
        }
        
        .box_r,
        .box_l {
            position: absolute;
            display: none;
            height: 30px;
            width: 30px;
            background-color: #CCC;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        
        .box_l {
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
        }
        
        .box_r {
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
        }
        
        .circle .active {
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <header>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3831263563,3611204861&fm=26&gp=0.jpg" alt="">
    </header>
    <div class="inner">
        <ul class="lunbo ">
            <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2613286700,2153536478&fm=26&gp=0.jpg" alt=""></li>
            <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3326645420,1548960890&fm=26&gp=0.jpg" alt=""></li>
            <li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1570190499,3408240602&fm=26&gp=0.jpg" alt=""></li>
        </ul>
        <ol class="circle">

        </ol>
        <div class="box_l">
            <span> < </span>
        </div>
        <div class="box_r">
            <span>></span>
        </div>
    </div>
</body>
<script src="./animition.js"></script>

</html>

 

js代码：

window.addEventListener('load', function() {
    function animition(obj, target, callback) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function() {
            var step = (target - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer)
                callback && callback()
            }
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 15)
    }
    var inner = document.querySelector('.inner')
    var box_l = document.querySelector('.box_l')
    var box_r = document.querySelector('.box_r')
    var lunbo = document.querySelector('.lunbo')
    var circle = document.querySelector('.circle')
    var ulWidth = lunbo.querySelector('li').offsetWidth
    inner.addEventListener('mouseenter', function() {
        box_l.style.display = 'block'
        box_r.style.display = 'block'
        clearInterval(timer)
        timer = null
    })
    inner.addEventListener('mouseleave', function() {
        box_l.style.display = 'none'
        box_r.style.display = 'none'
        timer = setInterval(function() {
            box_r.click()
        }, 1500)
    })

    for (var i = 0; i < lunbo.children.length; i++) {
        var li = document.createElement('li')
        li.setAttribute('index', i)
        li.addEventListener('click', function() {
            for (var i = 0; i < circle.children.length; i++) {
                circle.children[i].className = ''
            }
            var index = this.getAttribute('index')
            num = index
            num1 = index
            this.className = 'active'
            animition(lunbo, -index * ulWidth)
        })
        circle.appendChild(li)
    }
    circle.children[0].className = 'active'
    var first = lunbo.children[0].cloneNode(true)
    lunbo.appendChild(first)
    var num = 0
    var num1 = 0
    var flag = true
    box_r.addEventListener('click', function() {
        if (flag) {
            flag = false
            if (num == lunbo.children.length - 1) {
                lunbo.style.left = 0
                num = 0
            }
            num++
            animition(lunbo, -num * ulWidth, () => {
                flag = true
            })
            num1++
            if (num1 == circle.children.length) {
                num1 = 0
            }
            change()
        }
    })

    box_l.addEventListener('click', function() {
        if (flag) {
            flag = false
            if (num == 0) {
                num = lunbo.children.length - 1
                lunbo.style.left = -num * ulWidth + 'px'
            }
            num--
            animition(lunbo, -num * ulWidth, () => {
                flag = true
            })
            num1--
            if (num1 < 0) {
                num1 = circle.children.length - 1
            }
            change()
        }
    })

    function change() {
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].className = ''
        }
        circle.children[num1].className = 'active'
    }

    var timer = setInterval(function() {
        box_r.click()
    }, 1500)
})

 

Wrj6811
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js轮播图片小圆点变化_使用原生js实现轮播图效果
weixin_39955953的博客
01-12 861
这几天在逛网站的时候，发现很多网站都有轮播图这个效果，所以我就仿照小米的官网用原生js写了一个轮播图效果，希望大家喜欢。下面我简单跟大家说一下我实现该效果的过程，如果有什么错误的地方，欢迎大家说出来，以方便大家互相学习。我相信前面简单的html+css大家应该都会，我这里就不说了，简单给大家展示一下代码：HTML部分 c...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
weixin_35760849的博客
05-31 1721
要实现的功能大致为：点击两边的切换按钮，可以按顺序切换不同的图片具体操作如下：一、布局html1、添加一个div容器2、添加一个轮播图img标签3.添加两个按钮img标签二、css样式设置1、设置div容器的宽高分别为400px /200px，居中显示；2、设置轮播图img标签的宽高分别为400px /200px；3、将按钮img标签分别设置到左右两侧，需要用到float属性和position属性...
javascript初级动态效果之使用原生js实现轮播图效果
小杨的博客
09-01 1179
JS实现的N多简单无缝滚动代码(包含图文效果)本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。接着滚动开始，当滚动条...JS实现的N多简单无缝滚动代码(包含图文效果)本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。接着滚动开始，当滚动条...JS实现的N多简单无缝滚动代码(包含图文效果)本文实例讲述了JS实现
html原生js实现图片轮播,原生JS实现图片轮播切换效果
weixin_31706437的博客
06-04 677
原生JS实现图片轮播切换效果2019-01-06编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。首先来分析一下轮播图效果的实现原理：1、父元素作为显示窗口，大小固定超出部分隐藏，即设置overflow:hidden;2、子元素存放图片列表用ul，ul固定定位，参照为父元素，即...
史上最简单的原生JS实现轮播图效果
qq_39155611的博客
05-29 4123
原生JS实现轮播图效果 上篇文章我们说到了怎样利用原生JS实现Tab切换的效果，现在我们来说一下Tab切换的“升级版”。如何利用原生JS实现轮播图效果。如图： HTML代码： <div class="box"> <img src="img/0.jpg" alt=""> <!-- <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt="">
原生js实现轮播图效果
qq_43396420的博客
09-02 708
效果如下： 分析： 分析效果： 分析实现： 1、通过document.querySelector('.类名')的形式获取到装轮播图的大盒子（.carousel）、装轮播图左右按钮的标签的父元素（.chevron）、获取左右按钮（.chevron-left 、.chevron-right）、获取放轮播图图片的父元素ul（.carousel-body）【注：这里获取ul而不是回去li，是因为移动轮播图的时候是整个ul一起移动的】、最后还要获取装轮播图图片的li（.i...
html原生js实现图片轮播,原生js实现简单轮播图
weixin_39975261的博客
06-04 2624
本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构body:网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化css:初始化：包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化css设置：根据图片数与图片宽度设置轮播图宽度二、设置js逻辑需要...
原生javascript实现轮播图
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
10-11 700
这是我的个人小站
原生JS 实现轮播图效果
强风吹拂
05-14 882
根据传入的图片数量在页面的底部呈现轮播图的图片数量和当前为第几张图片，点击相应的圆圈则可以跳转至其他图片；左右两个按钮同样可以实现图片的切换，如果当前为第一张或者最后一张图片，点击左移或者右移按钮即可完成循环操作，从第一张图片跳转至最后一张图片，且切换图片的效果还在。...
VUE中用原生js实现轮播图效果
u011295864的博客
12-29 3777
代码如下： HTML部分： &lt;div class="mainBlock"&gt; &lt;!--显示的窗口--&gt; &lt;div class="displayWindow"&gt; &lt;!--可移动面板--&gt; &lt;div class="mobilePanel"
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现图片层叠轮播切换效果
10-22
【原生JS实现图片层叠轮播切换效果详解】 在网页设计中，动态的图片展示效果常常能够吸引用户的注意力，其中图片层叠轮播切换是一种常见的交互方式。本篇文章将深入探讨如何使用原生JavaScript来实现这一效果，帮助...
原生JS实现旋转轮播图+文字内容切换效果【附源码】
10-17
【原生JS实现旋转轮播图+文字内容切换效果】是一种常见的网页动态展示技术，用于在有限的空间内展示多张图片和相应的文字信息。本文将详细介绍如何使用纯JavaScript来实现这一功能，无需依赖jQuery等库。 首先，...
实现一个漂亮简单的登录界面
热门推荐
Wrj6811的博客
04-27 3万+
方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="st...
实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）
Wrj6811的博客
11-06 4442
类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度搜索框设置</title> <style&...
使用js实现鼠标拖动一个盒子移动的实例
Wrj6811的博客
04-11 2424
代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
使用js完成一个60秒倒计时，点击停止时就显示倒计时三个字
Wrj6811的博客
04-02 1795
废话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
输入一个时间，然后开始倒计时
Wrj6811的博客
04-07 1364
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
网页动画气泡效果
Wrj6811的博客
07-30 955
打开网页，从网页底部生成一个一个的气泡，然后气泡上升到页面顶部消失。 利用 setinterval定时器定时，每50毫秒生成一个气泡，然后设置他的样式，出现效果 效果图： 页面布局代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页动画气泡效果</title> <link rel="stylesheet" type="te.
请使用原生js实现轮播图
最新发布
03-31
以下是一个简单的原生js轮播图实现： HTML代码： ```html ``` CSS代码： ```css #slider { position: relative; width: 500px; height: 300px; overflow: hidden; } #slider img { position: ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值