原生js实现点击“上一张”、“下一张”按钮切换图片

目录结构：

代码：

<!DOCTYPE html>
<html lang="en"><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></head><body><div><img id="first" src="./images/img01.jpg" width="500px" height="300px" /></div><button style="margin-left: 180px;" id="prev">上一张</button><button id="next">下一张</button><script>// 1.获取DOM对象var img = document.getElementById("first");var prevBtn = document.getElementById("prev");var nextBtn = document.getElementById("next");// 2.添加点击事件var minPage = 1;var maxPage = 5;var currentPage = minPage;// 上一张按钮prevBtn.onclick = function() {// 第一张的上一张是最后一张if(currentPage === minPage) {currentPage = maxPage;} else {currentPage--;}img.setAttribute('src',`./images/img0${currentPage}.jpg`);}// 下一张按钮nextBtn.onclick = function() {// 最后一张的下一张是第一张if(currentPage === maxPage) {currentPage = minPage;} else {currentPage++;}img.setAttribute('src',`./images/img0${currentPage}.jpg`);}</script></body>
</html>

样式：

原生js实现点击“上一张”、“下一张”按钮切换图片相关推荐

html 上下翻页效果代码,原生js实现可以带上下翻页的翻页功能（代码）
本篇文章给大家带来的内容是关于原生js实现可以带上下翻页的翻页功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 翻页功能在渲染数据时经常用到,下面是使用原生JS去实现的一个 ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
JS实现点击button按钮切换图片
JS实现点击button按钮切换图片放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做 ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
点击图片实现上一张下一张JS
用js实现.点击图片的左边,去上一张:点击图片的右边,去下一张. Jquery脚本在http://jquery.com/ 下载 Jquery实现比较简单 <script src="ht ...
js实现图片上一张下一张点击
1.实现效果 2.实现原理根据数组的长度和一个div的宽度,计算出父元素的长度. document.getElementById("goods_bx").style.width= ...

原生js实现点击“上一张”、“下一张”按钮切换图片

目录结构：

代码：

样式：

原生js实现点击“上一张”、“下一张”按钮切换图片相关推荐

最新文章

热门文章