原生js点击轮播 点击切换图片

最新推荐文章于 2024-04-05 01:45:06 发布
最新推荐文章于 2024-04-05 01:45:06 发布
阅读量2.4k 收藏 7
点赞数 1
分类专栏： js 文章标签： 原生js 点击轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llllvvv/article/details/79928490
版权 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>点击轮播图</title>
</head>
<style>
        .container {
            position: relative;
            width: 600px;
            height: 400px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        } 
        .wrap {
            position: absolute;
            width: 4200px;
            height: 400px;
            z-index: 1;
        }
        .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
        }
         .container .buttons {
            position: absolute;
            right: 40%;
            bottom:20px;          
            z-index: 2;
        }   
        .container .buttons span {
            margin-left: 10px;
            display: inline-block;
            width: 7px;
            height: 7px;          
            background-color: #D4D4D4;
            text-align: center;
            color:white;
            cursor: pointer;           
        }
        .container .buttons span.on{
            background-color: #558949;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
</style>
<body>
    <div class="container">
        <div class="wrap" style="left:-600px;">
            <img alt="">
            <img src="./img/jd_app3.png" alt="">
            <img src="./img/jd_app4.png" alt="">
            <img src="./img/jd_app5.png" alt="">
            <img src="./img/jd_app6.png" alt="">
            <img src="./img/jd_app7.png" alt="">       
        </div>
        <div class="buttons">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>   
    </div>
    
    <script>
    	var wrap = document.querySelector(".wrap");         
        var index = 0;
        var dots = document.getElementsByTagName("span");
        function showCurrentDot () {
            for(var i = 0, len = dots.length; i < len; i++){
                dots[i].className = "";
            }
            dots[index].className = "on";
        }
        index++;
            if(index > 4){
                index = 0;
            }
        index--;
        if(index < 0){
            index = 4;
        }
        showCurrentDot();
         for (var i = 0, len = dots.length; i < len; i++){
            (function(i){
                dots[i].onclick = function () {
                    var dis = index - i;
                    if(index == 4 && parseInt(wrap.style.left)!==-3000){
                        dis = dis - 5;     
                    }
                    //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                    if(index == 0 && parseInt(wrap.style.left)!== -600){
                        dis = 5 + dis;
                    }
                    wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";
                    index = i;
                    showCurrentDot();
                }
            })(i);            
        }
    </script>
</body>
</html>

 

LLLiiv
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现点击按钮切换轮播图功能
10-14
主要为大家详细介绍了javascript实现点击按钮切换轮播图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现轮播图——三种切换方式
清风无虑skr的博客
10-26 3893
js轮播定时切换与点击切换 原本想用css实现轮播效果，就是改变透明的来实现轮播，但感觉太low了，于是便用JavaScript实现了，因为刚接触没多久所以写的不好。 先给大家看看效果图： 图片是我电脑保存的，如果要用的话可以把内的图片地址改下。 HTML <div class="ad" id="ad"> <div class="pics" id="pics"&...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
2401_84097820的博客
04-05 316
点击这里即可免费获取，包括答案解析。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-mZyL1LyZ-1712252662271)]
【Javascript】入门之实现轮播图效果(无缝轮播/箭头切换/圆点切换)
qq_37086980的博客
12-08 3325
描述: 1. 布局, 有几张图就有几个小圆点 2. 在页面中，每隔5s图片切换到下一章 3. 点击左箭头, 让图片依次切换 4–3--2–1--4 4. 点击右箭头, 让图片依次切换 1–2--3–4--1 5. 点击小圆点，图片切换到对应的 6. 鼠标划上div，清除定时器 7. 划下div, 定时器重新开启 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
欢迎━(*｀∀´*)ノ亻来到我的博客
09-07 1万+
效果一： 会自动进行轮播，当鼠标进入轮播图区域会停止轮播，点击左右箭头可以向前、向后进行切换图片 效果二： 这种效果比第一种效果简单，只要删除一些代码和修改一些样式即可。 实现原理 轮播图整体是放在ul里的，li里存放img图片（轮播的图片） <ul> <li> <img> </li> </ul> 给li元素进行绝对定位，且给每个li一个z-index值（堆叠数值，可以理解...
JavaScript随手笔记---轮播图（点击切换）
JMFive的博客
02-16 4229
大家好，又见面了，我是夜阑的狗，本文是专栏 【JavaScript随手笔记】专栏的第3篇文章;今天被丢了一个需求 😀 😀 😀，里面就需要实现轮播图，以前在学校时候实现过，但没做记录（博客），基本就模模糊糊的感觉，所以这次就把实现过程跟原理记录下来；【JavaScript随手笔记】， 此专栏是我是夜阑的狗对JS轮播图实现的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
热门推荐
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
js实现左右切换轮播图效果
qq_40261601的博客
02-19 4014
js实现图片跑马灯式轮播效果，可点击切换上下张，下方有定位圆点随图片切换激活状态
通过原生JavaScript 实现简单的轮播图样式
yzq1005ty的博客
07-28 428
主要通过，设置点击事件，定时器，if判断,排他思想来实现，简单的轮播图效果，是非常普通的轮播样式。可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。给图片下的小圆点进行布局，需要注意，定位，浮动，在这里可以设置一个hover，来为JS实现排他思想做布局，这样所呈现的效果就是，可以明确的显示出我点击了那个小圆点，有很直观的效果。给图片实现，滑动效果，要给left设置一个初始值，这样就会减少不会移动的BUG，需要注意一下的小小细节。使用点击事件，可以通过小圆点来切换图片，还有排他思.
Jquery实现简单的图片轮播 (通过点击数字切换)
Dream的博客
03-01 3534
最终实现效果图 代码块 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播</title> <link rel="stylesheet" href="css/index.css"> ...
js-图片的轮播-设置主要界面-和鼠标点击进行切换图片
weixin_47295886的博客
10-27 595
对超链接添加标识，控制图片和超链接的联动显示。实现鼠标点击，控制图片的移动。这里使用了一个大的ul。
原生js实现点击轮播切换图片
10-15
主要为大家详细介绍了原生js点击轮播切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js图片轮播切换代码
06-24
原生js图片轮播切换代码是一款带标题和索引左右按钮控制图片滚动轮播效果。
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现图片层叠轮播切换效果
10-22
主要为大家详细介绍了原生js实现图片层叠轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
python学习导航.txt
05-06
python
node-v8.3.0-linux-s390x.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
嵌入式微处理器设计及应用
05-06
摘要：为满足智能家居座椅的交互式运动控制需求，基于AT89S52设计了嵌入式座椅运动控制系统。使用VB.net设计了游戏手柄按键读取软件，并在此基础上设计了座椅运动控制软件，软件可分别在“手柄模式”和“鼠标模式”下与嵌入式座椅运动控制器通信，进而控制座椅进行加速、减速、正转和反转等运动；构建了控制系统实验装置，实验结果表明，“鼠标模式”下，通过鼠标点击控制软件上功能按钮可实现对座椅的准确运动控制；“手柄模式”下，游戏手柄不仅可控制座椅运动，还可同步控制电脑上运行的游戏或远程遥控车，实现浸入感较强的座椅运动娱乐应用。
2024年中国NFC RFID阅读器行业研究报告.docx
05-06
2024年中国NFC RFID阅读器行业研究报告
js图片轮播和点击切换
05-14
实现图片轮播和点击切换有很多方法，下面是其中一种基于原生 JavaScript 的实现方法： HTML 结构： ```html <span class="slider-nav-item active"></span> <span class="slider-nav-item"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值