好玩的原生轮播图

最新推荐文章于 2021-06-04 11:12:50 发布
最新推荐文章于 2021-06-04 11:12:50 发布
阅读量107 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45634533/article/details/102768571
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片轮播</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: none;
            box-sizing: border-box;
            list-style: none;
            font-family: 'Microsoft Yahei';
            font-size: 62.5%;
        }

        section {
            position: relative;
            margin: 50px auto;
            width: 800px;
            height: 850px;
            overflow: hidden;
        }

        section>div {
            position: absolute;
            left: 0;
            width: 5600px;
        }

        section>div>img {
            width: 800px;
            float: left;
        }

        section>ol {
            position: absolute;
            right: 5%;
            bottom: 2.5%;
        }

        section>ol>li {
            display: inline-block;
            padding: 2.5px 10px;
            border: 1px solid #ffffff;
            background-color: rgba(255, 255, 255, .5);
            color: #333333;
            cursor: pointer;
            font-size: 1.2rem;
        }

        section>ol>li:hover,
        section>ol>li.current {
            background-color: gold;
        }

        section>span {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 5;
            display: none;
            margin: auto;
            border: 1px solid #ffffff;
            width: 50px;
            height: 50px;
            background-color: #333333;
            color: #ffffff;
            opacity: .25;
            font-size: 3.6rem;
            font-weight: bold;
            font-family: '黑体';
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        section>span:hover {
            opacity: .5;
        }

        section>.left {
            left: 0;
        }

        section>.right {
            right: 0;
        }
    </style>
</head>

<body>
    <section>
        <div>
            <img src="https://img-blog.csdnimg.cn/20191027170147588.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
            <img src="https://img-blog.csdnimg.cn/20191027170209135.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
            <img src="https://img-blog.csdnimg.cn/20191027170231784.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
            <img src="https://img-blog.csdnimg.cn/2019102717034648.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
            <img src="https://img-blog.csdnimg.cn/20191027170405814.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
            <img src="https://img-blog.csdnimg.cn/20191027170429792.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
            <img src="https://img-blog.csdnimg.cn/20191027170449509.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNDUzMw==,size_16,color_FFFFFF,t_70" alt="">
        </div>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>

        </ol>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </section>
</body>
<script src=""></script>
<script>
    window.onload = function () {

        // 获取大盒子
        var section = document.querySelector('section')
        // 获取所有页码
        var page = document.querySelectorAll('li')
        // 获取左箭头
        var left = document.querySelector('.left')
        // 获取右箭头
        var right = document.querySelector('.right')
        // 获取所有图片
        var picture = document.querySelector('div')

        // 用一个全局变量 index 记录当前需要展示的图片的索引
        var index = 0
        // 计时器
        var timeID;
        timeID = setInterval(nextPage, 2000)
        // 鼠标移入图片轮播视觉范围时显示左右箭头，移除时隐藏
        section.onmouseover = function () {
            left.style.display = 'block'
            right.style.display = 'block'
            // 鼠标移入清除计时器
            clearInterval(timeID)
        }
        // 鼠标移出隐藏
        section.onmouseout = function () {
            left.style.display = ''
            right.style.display = ''
            // 鼠标移出开启计时器，图片轮播
            timeID = setInterval(nextPage, 2000);
        }
        // 左右箭头按钮注册点击事件，在事件中修改当前索引 index，索引 index 表示的是当前应该展示第几张图片
        left.onclick = function () {
            if (index == 0) {
                index = picture.children.length - 1
                picture.style.left = -1 * section.offsetWidth * index + 'px';
            }
            index--;
            animateMove(picture, -1 * section.offsetWidth * index)
            pageChange()
        }

        right.onclick = function () {
            // 调用下一页函数
            nextPage()
        }
      
        // 页码注册点击事件
        for (let i = 0; i < page.length; i++) {
            page[i].onclick = function () {
                // 页码要与图片保持一致
                var num = parseInt(this.innerHTML)
                // 图片数组的长度-1然后赋值给下标
                index = num - 1
                var target = -1 * section.offsetWidth * index
                animateMove(picture, target);
                pageChange();
            }
        }
        // 下一页
        function nextPage() {
            // 下标位图片的子元素的长度-1
            if (index == picture.children.length - 1) {
                // 下标为0时为第一张图
                index = 0
                picture.style.left = '0px';
            }
            index++;
            animateMove(picture, -1 * section.offsetWidth * index);
            pageChange();
        }
        // 页码与图片保持同步（当前显示的是第几张图片，下方页码对应索引高亮）
        function pageChange() {
            for (let i = 0; i < page.length; i++) {
                page[i].className = ''
                // 当图片是最后一张的下标是，页码应该显示第一张图
            } if (index == picture.children.length - 1) {
                page[0].className = 'current';
            } else {
                page[index].className = 'current';
            }
        }
    }
	
      var timeID
    function animateMove(obj,target) {
        // 0. 获取要移动的元素
        // var div = document.querySelector('div')
        clearInterval(timeID)
        // 1. 创建一个计时器，让 style.left 的值每隔一段时间增加一点，直到到达目标位置为止
        timeID = setInterval(() => {
            // 2. 获取盒子当前位置
            var current = obj.offsetLeft
            // 每次移动的距离
            var step = 100
            // 3. 添加单次运动距离
            // current = current + step
            //    声明一个开关变量 
            var isRigh = true
            // 4. 判断盒子是否到达目的地，到达就终止移动，否则就继续移动
            // if (current <= target) {
            //     obj.style.left = current + 'px'
            // } else {
            //     obj.style.left = target + 'px'
            //     clearInterval(timeID)
            // }
            // 判断元素的当前位置与目标位置的位置关系
            if (current < target) {
                // 当前位置小于目标位置，说明元素在目标位置的左边，向右移动
                current += step
                isRigh = true
            } if (current > target) {
                // 当前位置大于目标位置，说明元素在目标位置的右边，向左移动
                current -= step
                isRigh = false
            }
            // 修改left的值
            obj.style.left = current + 'px'
            if (isRigh ? current >= target : current <= target) {
                // 让元素到达目标位置
                obj.style.left = target + 'px'
                clearInterval(timeID)
            }
        }, 10)
    }

</script>

</html>

效果图如下:

在这里插入图片描述

似曾～相识
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
有趣的Swiper轮播图
03-23
2018年03月20日，项目中要实现一个比较有意思的轮播效果（这个页面要实现好几个轮播），[线上地址](http://http://www.risfond.com/bdm)，Swiper一直用的很顺手，于是继续用Swiper，效果图如下。实际效果一点都不卡顿，相当流畅，录图有问题。我把这个做了一个完整的DEMO，可以在这里下载。2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
最简单的无限轮播图
01-02
本demo是用最简单的逻辑，最简单的代码，最简单的方式，让无限轮播图最简单的呈现在我们眼前，本人对它的评价是“简单暴力”
一个好玩的轮播图
jiahui6666的博客
12-09 215
首先这是转载 官方地址: https://github.com/pinguo-zhouwei/MZBannerView 效果 下面是对一些能力较弱的程序猿们的步骤和坑 搭建环境: 1.根目录 allprojects { repositories { //轮播图 maven { url 'https://jitpack.io' } } } 2.使...
#小程序 分享一个有趣轮播图特效
zhang1509123907的博客
05-09 399
因为最近在做一个智慧校园i小程序，写到学校概况页面，就想到这个动画，来分享一下 一、先上图： 不得不说，放上照片后既视感有点gaoxiao 一、代码部分： <!-- wxml部分 --> <swiper class="swiper-block" circular previous-margin="250rpx" next-margin="250rpx" current="0" bindchange="swiperChange"> <block wx:f.
手写轮播图，原生Js实现轮播效果 效果
weixin_43347855的博客
09-25 210
手写轮播图，原生Js实现轮播效果 效果 废话不多说~ 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./lunbo.css"
html设置图片左右轮播js,js实现左右切换轮播图思路
weixin_34800976的博客
06-04 2401
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。(本文以阴阳师中“平安世界”模块的轮播图为例)这个轮播图，我...
原生轮播图
08-05
下面将详细探讨如何用原生技术实现轮播图的关键知识点。 **HTML结构** 首先，我们需要创建一个容器，通常使用`div`元素，里面包含多个用于展示图片的`img`元素或者`div`元素。每个图片或内容块都应有一个唯一的ID，...
原生JavaScript轮播图特效.zip
07-11
原生JavaScript轮播图特效
原生js轮播图
02-08
原生JavaScript实现的轮播图无需依赖任何外部库，如jQuery，这有助于减少页面加载时间，提高性能。本文将深入探讨如何利用JavaScript实现一个带动画效果、小圆点导航以及hover停止功能的轮播图。 首先，我们需要...
js原生轮播图.zip
05-21
**JavaScript原生轮播图实现详解** 在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，它能够高效地利用有限的空间，提供丰富的视觉体验。本篇将深入探讨如何使用原生JavaScript实现一套包含焦点轮播、...
BroadCast3D原生JS实现好玩的3D轮播图旋转特效
08-10
【 BroadCast3D原生JS实现好玩的3D轮播图旋转特效】 在现代网页设计中，为了吸引用户的注意力和提升用户体验，3D特效被广泛应用，尤其是3D轮播图旋转效果。`BroadCast3D` 是一个用原生JavaScript编写的库，专门用于...
超级搞笑的一组图片
weixin_33672109的博客
10-19 128
网上流传的超经典的一组图片 害人终害己啊 咱换个位置 跟欺负我，哼！！！ 这也是最强的，李小龙版本的 转载于:https://blog.51cto.com/zhuyq/407614...
程序员幽默：让你笑到肚子痛的搞笑动图
热门推荐
代码湾
01-12 2万+
今天小编用动图的方式带大家了解程序员这个逗逼、可爱的群体。看动图时大家注意形象啊！ 1、程序员的生存状态 。 2、双核CPU的真相。 3、当年学C语言的过程。 4、测试环境一切ok，马上上线 5、调试bug 6、正在调试，突然内存溢出了 7、卧槽，你动我代码，知道后果有多严重吗？！ 8、需求文档又改了
【编程】超级搞笑+趣图欣赏
12-16 1407
上传了一些收藏的图片，呵呵！超级搞笑 趣图欣赏
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
js 原生轮播图实现思路
03-31
1. 先准备好轮播图的 HTML 结构，一般是一个容器包裹若干个图片元素。 2. 通过 CSS 设置容器的大小、位置、样式等。 3. 使用 JavaScript 获取容器、图片元素等 DOM 节点。 4. 定义一个变量来记录当前显示的图片序号...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值