js implements mouse switching pictures (without timer)
|
This article example shares the specific code of js to realize the mouse switching picture for your reference. The specific content is as follows To achieve the effect, you can move the mouse on the corresponding small dots, or click the arrows on the left and right sides to switch pictures. The page number of the picture will be displayed above the picture, and the title of the corresponding picture will be displayed below. The full code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Switch</title>
<style>
.picture {
position: relative;
width: 500px;
height: 333px;
margin: 0 auto;
border: 2px solid rgb(231, 127, 217);
overflow: hidden;
}
.radius {
width: 100%;
height: 10px;
position: absolute;
bottom: 30px;
text-align: center;
}
.pg { //Page number above the picture position: absolute;
margin: 0;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, .4);
text-align: center;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.title {
position: absolute;
width: 100%;
bottom: 0px;
text-align: center;
font-size: 16px;
font-weight: 600;
color: rgb(21, 223, 72);
}
span {
display: inline-block;
border: 10px solid #fdfdfd;
border-radius: 50%;
}
.active {
border: 10px solid #656466;
}
/* Left and right arrows */
.arrowhead-left,
.arrowhead-right {
position: absolute;
width: 41px;
height: 69px;
font-size: 30px;
line-height: 70px;
text-align: center;
color: #D6D8D4;
background-color: rgba(0,0,0,.3);
}
.arrowhead-left {
left: 0;
top: 40%;
}
.arrowhead-right {
right: 0;
top: 40%;
}
</style>
</head>
<body>
<div class="picture">
<!-- Image Page Number-->
<p class="pg">Cover</p>
<img src="./image/d8.jpeg" alt="">
<!-- Small dots -->
<p class="radius"></p>
<!-- Title below the image-->
<p class="title">Title</p>
<!-- Left and right arrows -->
<div class="arrowhead-left" id="al"> < </div>
<div class="arrowhead-right" id="ar"> > </div>
</div>
<script>
var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
// var imgs = document.getElementsByTagName("img");
var imgs = document.querySelector("img");
var len = address.length;
var str = "";
var pp = document.getElementsByTagName("p"); //Get a collection // var pp = document.querySelector("p"); //Get an element var al = document.getElementById("al");
var ar = document.getElementById("ar");
//Add span tag for (i = 0; i < len; i++) {
str += ' <span></span>'
}
console.log(str);
console.log(pp);
pp[1].innerHTML = str;
var spans = pp[1].getElementsByTagName('span');
spans[0].className = 'active';
for (i = 0; i < len; i++) {
spans[i].index = i;
spans[i].onmouseover = function () { //The class of all dots is empty for (i = 0; i < len; i++) {
spans[i].className = "";
}
this.className = 'active'; //Add a class name to the clicked span (dot) imgs.src = address[this.index];
pp[0].innerHTML = [this.index + 1] + "/6";
pp[2].innerHTML = "scenery" + [this.index + 1];
}
}
var n = 0 ;
ar.onclick = function () {
for (i = 0; i < len; i++) {
spans[i].className = "";
}
spans[n].className = "active";
imgs.src = address[n];
pp[0].innerHTML = (n+1) + "/6";
pp[2].innerHTML = "scenery" +(n+1);
if (n<5) {
n++;
}
else {
n=0;
}
}
al.onclick = function () {
for (i = 0; i < len; i++) {
spans[i].className = "";
}
spans[n].className = "active";
imgs.src = address[n];
pp[0].innerHTML = (n+1) + "/6";
pp[2].innerHTML = "scenery" +(n+1);
if (n>0) {
n--;
}
else {}
n=(len-1);
}
}
</script>
</body>
</html>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:
|
<<: Autotrash tool for Linux to automatically delete old junk files at a scheduled time
>>: MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)
Recommend
Solution to occasional crash of positioning background service on Linux
Problem Description In the recent background serv...
Method for implementing performance testing of MySQL database through sysbench tool
1. Background Sysbench is a stress testing tool t...
A Preliminary Study on Vue Unit Testing
Table of contents Preface Why introduce unit test...
Introduction to the use of form OnSubmit and input type=image
If there is an <input type="image">...
This article will show you how to use SQL CASE WHEN in detail
Table of contents Simple CASEWHEN function: This ...
Tips to prevent others from saving as my web page and copying my site
Nowadays, copying websites is very common on the I...
Create a screen recording function with JS
OBS studio is cool, but JavaScript is cooler. Now...
Detailed explanation of performance optimization ideas for React functional components
Optimization ideas There are two main optimizatio...
Solve the problem of installing Theano on Ubuntu 19
Solution: Directly in the directory where you dow...
Issues with using Azure Container Registry to store images
Azure Container Registry is a managed, dedicated ...
How is MySQL transaction isolation achieved?
Table of contents Concurrent scenarios Write-Writ...
CentOS method to modify the default ssh port number example
The default ssh port number of Linux servers is g...
Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment
1. Prerequisites Since I have installed it severa...
jQuery achieves large-screen scrolling playback effect
This article shares the specific code of jQuery t...
Implementation of react automatic construction routing
Table of contents sequence 1. Centralized routing...