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
MySQL 8.0.22 compressed package complete installation and configuration tutorial diagram (tested and effective)
1. Download the zip installation package Click he...
How to use ElementUI pagination component Pagination in Vue
The use of ElementUI paging component Pagination ...
Nginx uses reverse proxy to implement load balancing process analysis
Introduction Based on docker container and docker...
Docker Compose installation methods in different environments
1. Online installation Currently only tried the L...
Detailed explanation of the idea of implementing dynamic columns in angularjs loop object properties
Angularjs loop object properties to achieve dynam...
JavaScript mobile H5 image generation solution explanation
Now there are many WeChat public account operatio...
Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5
ps: The environment is as the title Install possi...
Detailed explanation of redundant and duplicate indexes in MySQL
MySQL allows you to create multiple indexes on th...
Vue echarts realizes dynamic display of bar chart
This article shares the specific code of vue echa...
Responsive layout summary (recommended)
Basic knowledge of responsive layout development ...
What you need to know about filters in Vue
Table of contents Preface What is a filter How to...
vue+node+socket io realizes multi-person interaction and releases the entire process
1. Background 1. The front end uses vue + vuex + ...
Detailed explanation of how to use JavaScript paging component
The pagination component is a common component in...
Docker installation Nginx tutorial implementation illustration
Let’s install Nginx and try it out. Please note t...
MariaDB-server installation of MySQL series
Table of contents Tutorial Series 1. Install Mari...