原生JS轮播图

最新推荐文章于 2024-06-17 15:29:34 发布
置顶 最新推荐文章于 2024-06-17 15:29:34 发布
阅读量97 收藏 1
点赞数
分类专栏： 新手入门 文章标签： 原生JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33538922/article/details/88033591
版权

新手入门小案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            width: 1680px;
            height: 560px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }
        
        #imgWrap {
            width: 8400px;
            height: 560px;
            font-size: 0;
            position: absolute;
            left: 0;
            transition: 1s;
        }
        
        #imgWrap img {
            width: 1680px;
            height: 560px;
        }
        
        #left, #right {
            width: 50px;
            height: 70px;
            background-color: #000;
            color: #fff;
            position: absolute;
            top: 50%;
            margin-top: -35px;
            font-size: 30px;
            text-align: center;
            line-height: 70px;
            cursor: pointer;
            opacity: 0.5;
        }
        
        #left {
            margin-left: 10px;
            left: 0;
        }
        
        #right {
            margin-right: 10px;
            right: 0;
        }
        
        ul {
            position: absolute;
            bottom: 10px;
            left: 735px;
        }
        
        li {
            list-style-type: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            border: 1px solid red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="imgWrap">
        <img src="images/banner1.jpeg" alt="">
        <img src="images/banner2.jpeg" alt="">
        <img src="images/banner3.jpeg" alt="">
        <img src="images/banner4.jpeg" alt="">
        <img src="images/banner5.jpeg" alt="">
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="left">&lt;</div>
    <div id="right">&gt;</div>
</div>
<script>
    //定义变量
    var imgWrap,leftBtn,rightBtn,preLi,liLists;
    var position=0;
    init();
    function init() {
        //获取元素
        imgWrap=document.getElementById("imgWrap");
        leftBtn=document.getElementById("left");
        rightBtn=document.getElementById("right");
        
        leftBtn.addEventListener("click",clickHandler);
        rightBtn.addEventListener("click",clickHandler);
        //获取每个li元素,转为数组
        liLists=Array.from(document.getElementsByTagName("li"));
        //为每一个Li添加事件
        for(var i=0;i<liLists.length;i++){
            liLists[i].addEventListener("click",liClickHandler);
        }
        move();
    
    }
    function liClickHandler(e) {
        //position 等于 此时 这个li的下标
        position=liLists.indexOf(this);
        //执行移动函数
        move();
    }
    function clickHandler(e) {
        if(this===leftBtn){
            position--;
            if(position<0){
                position=4;
            }
            move();
            return;
        }
        position++;
        if(position>4){
            position=0;
        }
        move();
    }
    
    function move() {
        imgWrap.style.left=-1680*position+"px";
        if(preLi){
            preLi.style.backgroundColor = "rgba(255,0,0,0)";
        }
        //如果不存在 就 把第一个设为preLi  默认
        preLi = liLists[position];
        // preLi.style.background = "rgba(255,0,0,0.3)";
        preLi.style.backgroundColor="rgba(255,0,0,0.3)";
    }
</script>
</body>
</html>

大概效果如下

不解风情丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现轮播图
阿松的博客
06-30 2634
第一次对手写轮播图有比较清晰的理解，记录一下。由于实际实现的时候样式很多都不同，因此就实现一个最简易的方案，可以按照需求往上加内容。
原生js轮播图的实现
m0_72920117的博客
07-24 306
原理就是当点击到小圆点时，得到相应的i值，这个i值也就是span的index值，我们拿他和全局变量index作比较，然后重新设置wrap.style.left的值，然后把i值复制给全局变量index，最后显示当前的小原点即可。值得注意的是这里涉及到了闭包的概念，如果直接使用for循环，则不能得到正确的结果。很多网站都有轮播图，我这里为大家简答的介绍一下,如果有些的不对的地方请大家及时提出意见，也希望给大家带来帮助。小圆点部分是那个可以点击切换部分这个是根据图片来设置圆点的个数的不是自己想设置多少。...
html原生js实现图片轮播,原生js实现简单轮播图
weixin_39975261的博客
06-04 2634
本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构body:网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化css:初始化：包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化css设置：根据图片数与图片宽度设置轮播图宽度二、设置js逻辑需要...
原生js轮播图定时切换实现
yang20000222的博客
05-22 227
轮播图的实现，用原生JS实现轮播图，思路大盒子套几个小盒子，小盒子一排显示，大盒子为小盒子的长宽，加定位实现每日一剂，提升醒脑。
原生js实现轮播图的两种方式
h395910638的博客
06-17 516
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
html原生js实现图片轮播,如何用原生JS实现图片轮播
weixin_39733805的博客
06-04 238
图片轮播大多应用在商品展示中。实现方法:主要通过原生javascript编写。实现原理：上图中看到中间的图片就是要展示的图片，只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中，让带所有图片的div左右来回切换达到图片滑动然后再给展示窗口的div设置overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。先设置HTML和CSS样式大图滚动*{margin:0;...
原生javascript实现轮播图
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
10-11 707
这是我的个人小站
原生js轮播图
weixin_52424002的博客
03-30 808
JavaScript 原生js 轮播图 <script> // 1. 获取元素 ul spans lis var ul = document.getElementsByTagName('ul')[0]; var spans = document.getElementsByTagName('span'); var lis = document.getElementsByTagName('li'); // 2. 不知
原生JS实现轮播图
qq_43781887的博客
05-19 2602
实现效果： 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮 2.点击右侧按钮一次，图片往左播放一张，左侧按钮同理。 3.图片播放的同时，下面的小圆圈模块也跟随一起变化。 5.鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。 轮播图向右移动的时候要用到缓动画的函数，具体见博客JS案例-添加缓动画_setTimeout()的博客-CSDN博客 （1）布局：轮播图部分的图片用ul进行布局，里面的每个li放a标签，a标签里面再放img；ul需要采用定
jsjs原生 JavaScript轮播图 渐变淡入淡出
weixin_62980497的博客
01-20 525
给ol添加一个index属性，以便于获取当前属于第几张图片（ol 和 ul 里面的 li 数量是一致的）。设置flag（节流阀）保证是一次跳转完成之后才可以实现下一次的跳转。常见的轮播图有两种：移动距离轮播图，渐变切换轮播图但是轮播图的代码都是差不太多的。这里就是给大家讲解的是渐变轮播图的切换，box（装整个轮播图的盒子）获得焦点的时候按钮style.display属性改为block失去焦点none。图片的数量动态生成小圆圈的数量，实现灵活控制。根据ul里的li的长度得到小圆圈的数量。
原生JavaScript轮播图特效.zip
07-11
原生JavaScript轮播图特效
原生js图片轮播切换代码
06-24
本项目名为“原生js图片轮播切换代码”，它利用JavaScript的原生功能来实现图片的自动轮播以及通过标题和索引按钮进行手动控制。下面将详细介绍这个项目中的关键知识点。 1. **原生JavaScript**： - 原生...
原生js轮播图自动切换代码
04-25
原生JavaScript实现的轮播图自动切换代码是不依赖任何第三方库如jQuery的纯JavaScript解决方案，具有较高的性能和自定义性。下面将详细解析这种轮播图的实现原理和关键知识点。 1. **基本结构**：轮播图通常由一...
原生js轮播图自动切换特效代码
03-20
以下是关于这个原生JavaScript轮播图的详细知识点： 1. **自动播放**：轮播图能够按照设定的时间间隔自动切换到下一张图片，这通过JavaScript的定时器（`setInterval`）实现。定时器每隔一定时间执行一个函数，该...
VS2010旗舰版VB.NET版本视频剪辑源代码QZQ-2024-8-11 -简化版.zip
08-11
VS2010旗舰版VB.NET版本视频剪辑源代码QZQ-2024-8-11 -简化版.zip
来自我大二的课程实验-os实验一
最新发布
08-11
来自我大二的课程实验-os实验一
微信小程序设计同城黑卡小程序源代码+部署教程完美运行版.7z
08-11
经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。
打印出所有的"水仙花数(narcissus number)，所谓"水仙花数"是指一个三位数，其各位数字立方和等于该数本身 例如
08-11
题目：打印出所有的"水仙花数(narcissus number)“，所谓"水仙花数"是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个"水仙花数”，因为153=1的三次方＋5的三次方＋3的三次方。 逻辑：利用for循环控制100-999个数，每个数分解出个位，十位，百位。 扩展：水仙花数（Narcissistic number）也被称为超完全数字不变数（pluperfect digital invariant, PPDI）、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数（Armstrong number），水仙花数是指一个 3 位数，它的每个位上的数字的 3次幂之和等于它本身（例如：1^3 + 5^3+ 3^3 = 153）
原生js轮播图百叶窗
11-21
很抱歉，根据您提供的引用内容，我无法回答关于原生js轮播图百叶窗的问题。但是，我可以为您介绍一下Nacos的服务发现与注册功能以及如何使用它。 Nacos的服务发现与注册功能可以帮助云原生应用实现动态服务发现和注册。具体来说，它可以让应用自动地注册和注销服务实例，并且可以让其他应用自动地发现这些服务实例。这样，应用就可以更加灵活地进行服务调用和协同工作。 使用Nacos的服务发现与注册功能，您需要进行以下步骤： 1. 安装Nacos并启动服务。 2. 在应用中引入Nacos的客户端SDK。 3. 在应用中配置服务实例的元数据信息，例如服务名称、IP地址、端口号等。 4. 在应用中使用客户端SDK注册服务实例。 5. 在应用中使用客户端SDK发现其他服务实例。 下面是一个使用Nacos服务发现与注册功能的示例代码： ```javascript // 引入Nacos的客户端SDK const Nacos = require('nacos'); // 创建Nacos客户端实例 const nacos = new Nacos({ logger: console, serverList: '127.0.0.1:8848', // Nacos服务的地址和端口号 }); // 配置服务实例的元数据信息 const serviceName = 'example-service'; const ip = '127.0.0.1'; const port = 3000; // 注册服务实例 nacos.registerInstance(serviceName, { ip, port, metadata: { weight: 1, }, }); // 发现其他服务实例 const instances = await nacos.request('/nacos/v1/ns/instance/list', { searchParams: { serviceName, }, }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值