当前位置:网站首页>JS picture switching case
JS picture switching case
2022-06-24 18:35:00 【Brother Mengfan】
JS Picture switching case
One 、 Case needs
Click the previous or next button , The picture will switch
Two 、 case analysis 、
1、 Event source : Button (button)
2、 Event type : Click on (onclick)
3、 Event handler :
(1) First of all, determine the picture number
(2) Picture switching : change img Of src route
3、 ... and 、 preparation
1、 Photo 4 Zhang
2、 The naming format is uniform :p1.png、p2.png、p3.png、p4.png
3、 take 4 Photos in image In the document
Four 、 The code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Picture switching </title>
<style>
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/image01.jpg" id="flower">
<br>
<button id="prev"> Previous </button>
<button id="next"> Next </button>
<script>
// 1. Get elements
var img = document.querySelector('img')
var btn1 = document.querySelector('#prev')
var btn2 = document.querySelector('#next')
var minIndex = 1,
maxIndex = 4,
currentIndex = minIndex;
// 2. Add event
btn1.onclick = function() {
// Judge whether the number is greater than 4, Greater than, the minimum value is assigned to the current index
if (currentIndex === minIndex) {
currentIndex = maxIndex;
} else {
currentIndex--;
}
img.src = 'images/image0' + currentIndex + '.jpg';
// img.setAttribute('src', `images/image0${currentIndex}.jpg`); //ES6 grammar
};
btn2.onclick = function() {
// Judge whether the number is greater than 4, Greater than, the minimum value is assigned to the current index
if (currentIndex >= maxIndex) {
currentIndex = minIndex;
} else {
currentIndex++;
}
img.src = 'images/image0' + currentIndex + '.jpg';
// img.setAttribute('src', `images/image0${currentIndex}.jpg`); //ES6 grammar
};
</script>
</body>
</html>边栏推荐
- Implementation of pure three-layer container network based on BGP
- Three layer switching experiment
- 视频平台如何将旧数据库导入到新数据库?
- Can the money invested in financial products be withdrawn at any time?
- [NLP] 3 papers on how Stanford team builds a better chat AI
- Restful design method
- (Video + graphics) introduction to machine learning series - Chapter 11 support vector machines
- Cloud service selection of enterprises: comparative analysis of SaaS, PAAS and IAAs
- Mariana Trench, Facebook's open source code analysis tool
- 解决执行MapReduce程序控制台没有日志信息WARN Please initialize the log4j system properly
猜你喜欢

Software testing methods: a short guide to quality assurance (QA) models

Complete Guide to web application penetration testing

13 ways to reduce the cost of cloud computing

Flutter dart regular regexp matches non printing characters \cl\cj\cm\ck

Get the actual name of the method parameter through the parameter

How do yaml files and zmail collide with the spark of the framework, and how can code and data be separated gracefully?

How to start cloud native application development

微服务系统设计——数据模型与系统架构设计

Ten software development indicators for project managers

Several key points for enterprises to pay attention to digital transformation
随机推荐
R中的指数回归
持续助力企业数字化转型-TCE获得国内首批数字化可信服务平台认证
[NLP] 3 papers on how Stanford team builds a better chat AI
About pyqt5 to realize paging function (one window implements different interfaces)
【leetcode】838. Push domino (Analog)
SDL: cannot play audio after upgrading openaudio to openaudiodevice
Palindrome string (two methods)
25.sql statement differentiation
How does the video platform import the old database into the new database?
如何在 R 中执行幂回归
You don't know about this inspection platform. It's a big loss!
视频平台如何将旧数据库导入到新数据库?
SAP license:sap s/4hana is the answer
Get max value of a bit column - get max value of a bit column
Ten excellent business process automation tools for small businesses
Vite+web3:报错出现ReferenceError: process is not defined
ASP. Net hosting uploading file message 500 error in IIS
What if the database table structure changes? Smartbi products support one click synchronization
13 skills necessary for a competent QA Manager
Recommend a distributed JVM monitoring tool, which is very practical!