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
Specific steps for Vue browser to return monitoring
Preface When sharing a page, you hope to click th...
Preventing SQL injection in web projects
Table of contents 1. Introduction to SQL Injectio...
Summary of commonly used tags in HTML (must read)
Content Detail Tags: <h1>~<h6>Title T...
MySQL controls the number of attempts to enter incorrect passwords
1. How to monitor MySQL deadlocks in production e...
Detailed example of deploying Nginx+Apache dynamic and static separation
Introduction to Nginx dynamic and static separati...
mysql5.7.19 winx64 installation and configuration method graphic tutorial (win10)
The installation tutorial of mysql 5.7.19 winx64 ...
In-depth explanation of MySQL isolation level and locking mechanism
Table of contents Brief description: 1. Four char...
How to use css variables in JS
How to use css variables in JS Use the :export ke...
Vue image cropping component example code
Example: tip: This component is based on vue-crop...
Detailed explanation of various usages of proxy_pass in nginx
Table of contents Proxy forwarding rules The firs...
Detailed explanation of vue-router 4 usage examples
Table of contents 1. Install and create an instan...
Detailed explanation of the idea of installing mysql8.0.11 and changing the root password and connecting navicat for mysql
1.1. Download: Download the zip package from the ...
Basic installation tutorial of mysql decompression package
Since I have changed to a new computer, all the e...
Complete steps to use samba to share folders in CentOS 7
Preface Samba is a free software that implements ...
How to implement mask layer in HTML How to use mask layer in HTML
Using mask layers in web pages can prevent repeat...