JS点击事件---点击切换图片

一、先上主图

二、源码

<!DOCTYPE html>
<html lang="zh">
<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>改变元素中的内容</title><style>*{margin: 0;padding: 0;}.z_img{overflow: hidden;position: absolute;width: 960px;height: 540px;}img{width: 960px;}.w_dian{position: absolute;top: 500px;left: 375px;}span{display: inline-block;width: 27px;height: 27px;line-height: 27px;text-align: center;border-radius: 50%;border: 2px solid rgba(245, 207,207,0.47);margin-left: 10px;cursor: pointer;}</style>
</head>
<body><div class="z_img"><img src="img/1.png" alt="" id="zzj"><img src="img/1.png"><img src="img/2.png"><img src="img/3.png"><img src="img/4.png"></div><div class="w_dian"><span ></span><span ></span><span ></span><span ></span></div><script>var span = document.querySelectorAll('span');// console.log(span);   //观察用for (let i = 0;i<span.length;i++){span[0].style.backgroundColor = 'rgba(255, 255,255)';//目的是进入页面就是显示第一种图span[i].onclick = function(){for (let i = 0;i<span.length;i++){span[i].style.backgroundColor =''//作用是每次切换点击的位置时清除所有的背景颜色---方便点击后的背景颜色的出现}span[i].style.backgroundColor = 'rgba(255, 255,255)';let zzj = document.getElementById('zzj');let img = document.querySelectorAll('img')[i+1];//为什么获取 i+1 张图片因为第一张图片与第二张图片一致---且两张图片不可合并zzj.src = img.src;//将点击获取的图片信息赋值给第一张图片---达到切换的效果}}</script>
</body>
</html>

三最终效果

最后

安利个网站------学习JavaScript可以看看-------https://zh.javascript.info/-----现代JavaScript

JS点击事件---点击切换图片相关推荐

jquery 点击事件点击元素添加和移除class
jquery 点击事件点击元素添加和移除class 怎么实现点击一个元素给它添加class,再点击一个元素移除上一个元素的class,再给现在点击的元素添加class <div class=&q ...
html图片重叠鼠标点击更换,html实现点击预览图切换图片方法
1.javascript实现的效果循环浏览所有图像,并为每个图像插入一个元素thumb-bar,将图像嵌入页面中. 将onclick处理程序附加到每个内部,thumb-bar 以便在单击它们时在di ...
JS学习第一天——鼠标悬停切换图片
html部分 css部分 js部分效果
jquery 点击事件点击两次才有效
解决方法 $("#div").click(function(e){e.stopPropagation(); //表示阻止向父元素冒泡e.preventDefault(); //阻止 ...
jquery 点击事件点击元素添加class，兄弟节点移除class
欢迎大家一起交流学习n(*≧▽≦*)n $("#circle").on('click', 'li',function(){$(this).addClass("active ...
很基本的js点击事件和jq点击事件的写法
js点击事件常用获取到id <div id="box">click</div> var btn=document.getElementById('box' ...
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
文章目录一.浮动按钮及点击事件二.底部显示按钮组件三.手势检测器组件四.image_picker 完整代码示例五.相关资源一.浮动按钮及点击事件一般使用 Scaffold 组件作为界面的 ...
【影院选座功能模板】vue实现选座功能，点击切换图片，获取座位信息
前言最近突然看到这个功能了,就想着研究一下如何写, 然后在网上看了一些帖子,总结了一下, 这里套用了一个别人的数据结构,这个感觉毕竟好用. 然后写一个简单的模板放在这,以后可能会再这个基础上修改或者 ...
android点击linearlayout没反应,LinearLayout设置点击事件的问题
我给LinearLayout设置点击事件,LinearLayout中有一个ImageButton和一个TextView,为什么我点击Imagebutton无法触发点击事件,点击TextView就会触发 ...

JS点击事件---点击切换图片

一、先上主图

二、源码

三最终效果

最后

JS点击事件---点击切换图片相关推荐

最新文章

热门文章