js实现基本图片切换功能

1.首先我们写个基本样式：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div img {width: 323px;border: pink solid 15px;}.outer {width: 353px;margin: 0 auto;}.outer .left {float: left;}.outer .right {float: right;}</style></head><body><div class="outer"><img id="img" src="img/1.jpg" alt="美女"><button class="left">上一张</button><button class="right">下一张</button></div></body>
</html>

如图所示：

2.我们在img文件夹下面多放几张图片，然后把路径写入一个数组中，开始编写js代码

<script>window.onload = function (){// 存放图片路径的数组let src = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];// 访问下标let i = 0;// 获取一组buttonlet elementsByTagName = document.getElementsByTagName("button");// 获取需要改变的图片地址let elementById = document.getElementById("img");// 遍历button元素for (let elementsByTagNameElement of elementsByTagName) {elementsByTagNameElement.onclick =function () {if(elementsByTagNameElement.innerHTML === "上一张"){// 防止下标为负数if (i===0){i=src.length-1;elementById.src = src[i]}else{i--;elementById.src = src[i]}}if(elementsByTagNameElement.innerHTML==="下一张"){// 防止下标越界if(i === src.length-1){i=0;elementById.src = src[i]}else{i++;elementById.src=src[i];}}}}}
</script>

运行即可

js实现基本图片切换功能相关推荐

html中实现添加水印的功能,JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
js技术实现图片放大镜功能
利用idea软件 js技术实现图片放大功能第一步准备图片将要放大图片放大 web 下第二步具体实现代码 <%@ page contentType="text/html;cha ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
html点击圆点箭头分页,点击自动轮播图片下面的小圆点实现图片切换功能，并不是左右箭头那种切换...
我这个轮播图片没有左右箭头,只有下面的小圆点随着图片一起轮播,怎么实现onclick点击小圆点切换图片的功能这是我的js代码 var nextPcc = 1; function turnDispla ...
JS 实现 Tab标签切换功能
Tab标签切换效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
html借助JS简单实现图片闪烁功能
图片闪烁功能: 点击按钮,实现图片闪烁效果如图: 代码如下: <!DOCTYPE html> <html><head><meta charset=&quo ...
php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码背景切换因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
5.21工作记录（修改页面跳转，去掉多余的js；增加图片清除功能）
导出的war包给测试却发现还是以前的效果,虽然代码都没有问题,而且本地我这里是没有任何问题但是改了的东西在那边未生效网上说是因为缓存没清干净,然后我去删了本地的全部代码重新导入删项目重新导的时候发 ...
网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>阶 ...

js实现基本图片切换功能

js实现基本图片切换功能相关推荐

最新文章

热门文章