JavaScript to achieve simple image switching
|
This article shares the specific code for JavaScript to achieve simple image switching for your reference. The specific content is as follows Here are several ways to switch pictures: Method 1 (for beginners! Easy to understand) The code is attached below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Switch 2</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
border: 1px solid #ccc;
width: 450px;
height: 70px;
padding-top: 450px;
background: url("img/big_pic01.jpg") no-repeat;
}
#box ul li{
float: left;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="item1">
<img src="img/pic01.webp">
</li>
</ul>
<ul>
<li id="item2">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li id="item3">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li id="item4">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li id="item5">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<script type="text/javascript">
//Beginner's writing method // 1. Get the event source var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
var item4 = document.getElementById("item4");
var item5 = document.getElementById("item5");
var oBos = document.getElementById("box");
// 2. Add event item1.onmouseover = function (){
//When the mouse hovers over the relevant id, the image pointing path changes oBos.style.background = "url('img/big_pic01.jpg') no-repeat";
}
item2.onmouseover = function (){
oBos.style.background = "url('img/big_pic02.jpg') no-repeat";
}
item3.onmouseover = function (){
oBos.style.background = "url('img/big_pic03.jpg') no-repeat";
}
item4.onmouseover = function (){
oBos.style.background = "url('img/big_pic04.jpg') no-repeat";
}
item5.onmouseover = function (){
oBos.style.background = "url('img/big_pic05.jpg') no-repeat";
}
</script>
</body>
</html> The JS code above may be cumbersome and may easily cause code redundancy. Then let's make some modifications and look at method 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Switch 2</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
border: 1px solid #ccc;
width: 450px;
height: 70px;
padding-top: 450px;
background: url("img/big_pic01.jpg") no-repeat;
}
#box ul li{
float: left;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="item1">
<img src="img/pic01.webp">
</li>
</ul>
<ul>
<li id="item2">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li id="item3">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li id="item4">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li id="item5">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<script type="text/javascript">
// 1. Get the event source. This saves a lot of var definition process. function $(id){
return typeof id === "string"?document.getElementById(id):null;
}
// Change the background image liId is the id pointed to and imgSrc is the parameter to pass the background image in function changebgcImg(liId,imgSrc){
// 2. Add event $(liId).onmouseover = function (){
// 3. Change the background image $("box").style.background = imgSrc;
}
}
changebgcImg("item1",'url("img/big_pic01.jpg") no-repeat');
changebgcImg("item2",'url("img/big_pic02.jpg") no-repeat');
changebgcImg("item3",'url("img/big_pic03.jpg") no-repeat');
changebgcImg("item4",'url("img/big_pic04.jpg") no-repeat');
changebgcImg("item5",'url("img/big_pic05.jpg") no-repeat');
</script>
</body>
</html> As you can see, method 2 uses less JS code than method 1. Following the above modifications, we can look at method three:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image switch full version</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
border: 1px solid #ccc;
width: 450px;
height: 70px;
padding-top: 450px;
background: url("img/big_pic01.jpg") no-repeat;
}
#box ul li{
float: left;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="item">
<img src="img/pic01.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<script type="text/javascript">
// 1. Get the event source function $(id){
return typeof id === 'string'? document.getElementById(id):null;
}
// Get all the li tags named item below var items = document.getElementsByClassName("item");
// console.log(items);
for (var i=0;i<items.length;i++){
var item = items[i];
item.index = i+1;
items[i].onmouseover = function (){
$("box").style.background = `url("img/big_pic0${this.index}.jpg") no-repeat`
// You cannot directly set ${i} but need to redefine the variable item because the i called in the function is a global variable, and i will always point to 5 after the for loop
// $("box").style.background = `url("img/big_pic0${i}.jpg") no-repeat`
}
}
</script>
</body>
</html>All three methods can achieve the image switching effect (the first method is not recommended if there are many images and the number of images to be displayed is not the same). The image switching effects are as follows:
I also have a blog post that also implements image switching effects. The methods used are slightly different from these three. You can refer to it, so I won’t merge them for now: JavaScript to implement Taobao product image switching effects The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Continuous delivery using Jenkins and Docker under Docker
>>: MySQL 5.7.21 installation and configuration tutorial
Recommend
Implementation of converting between underline and camel case in js (multiple methods)
Table of contents Application scenarios: Method 1...
Detailed explanation of the process of deploying Tomcat and creating the first web project in IDEA 2020.3.1
Table of contents Tomcat Introduction Tomcat depl...
Summary of scientific principles and suggestions for web design and production
<br />In the field of network design, resear...
The implementation code of the CSS3 input box is similar to the animation effect of Google login
Use CSS3 to animate the input box similar to the ...
Detailed explanation of tcpdump command examples in Linux
Preface To put it simply, tcpdump is a packet ana...
Tips and precautions for using MySQL index
1. The role of index In general application syste...
Vue data two-way binding implementation method
Table of contents 1. Introduction 2. Code Impleme...
How to modify the initial password of a user in mysql5.7
When users install MySQL database for the first t...
Press Enter to automatically submit the form. Unexpected discovery
Copy code The code is as follows: <!DOCTYPE ht...
VMWare Linux MySQL 5.7.13 installation and configuration tutorial
This article shares with you the tutorial of inst...
js addition, subtraction, multiplication and division precise calculation method example code
Preface Because computer numbers are floating poi...
Detailed explanation of how to find the location of the nginx configuration file
How can you find the location of the configuratio...
Detailed tutorial on installing different (two) versions of MySQL database on Windows
1. Cause: I need to import a sql file, but I can&...
Three ways to forward linux ssh port
ssh is one of the two command line tools I use mo...
How to use CSS pseudo-elements to control the style of several consecutive elements
When using CSS pseudo-elements to control element...