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
Vue commonly used high-order functions and comprehensive examples
1. Commonly used high-order functions of arrays S...
MySQL binlog opening steps
Binlog is a binary log file that is used to recor...
WeChat Mini Programs Implement Star Rating
This article shares the specific code for WeChat ...
Detailed tutorial on installing mysql 5.7.26 on centOS7.4
MariaDB is installed by default in CentOS, which ...
mysql obtains statistical data within a specified time period
mysql obtains statistical data within a specified...
Windows Server 2016 Quick Start Guide to Deploy Remote Desktop Services
Now 2016 server supports multi-site https service...
Zen Coding Easy and fast HTML writing
Zen Coding It is a text editor plugin. In a text ...
Detailed explanation of the meaning of N and M in the MySQL data type DECIMAL(N,M)
A colleague asked me what N and M mean in the MyS...
Detailed explanation of data types in JavaScript basics
Table of contents 1. Data Type 1.1 Why do we need...
Use button trigger events to achieve background color flashing effect
To achieve the background color flashing effect, j...
The latest mysql-5.7.21 installation and configuration method
1. Unzip the downloaded MySQL compressed package ...
Detailed explanation of JavaScript's built-in objects Math and strings
Table of contents Math Objects Common properties ...
How to mount a disk in Linux
When using a virtual machine, you may find that t...
Docker cleaning killer/Docker overlay file takes up too much disk space
[Looking at all the migration files on the Intern...
Detailed explanation of how to build a CDN server with Nginx (picture and text)
Using Nginx's proxy_cache to build a cache se...