Using JavaScript to implement carousel effects
|
This article shares the specific code for JavaScript to achieve the special effects of the carousel map for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aaa {
width: 600px;
height: 350px;
position: relative;/*Relative positioning*/
margin: 50px auto;/*50px from the top and centered*/
}
.picture img {
position: absolute;/*absolute positioning*/
}
.dot {
position: absolute;
bottom: 5px;
}
.dot li {
float: left;
width: 16px;
height: 16px;
background-color: #e8e8e8;
border-radius: 50%;
list-style: none;/*Clear list style*/
margin-right: 10px;
cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/
}
.left {
width: 30px;
height: 30px;
position: absolute;
top: 169px;
text-align: center;
background-color: #000000;
line-height: 30px;
color: #FFFFFF;
cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/
}
.right {
width: 30px;
height: 30px;
position: absolute;
top: 169px;
right: 0;
text-align: center;
background-color: #000000;
line-height: 30px;
color: #FFFFFF;
cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/
}
.aaa .spot {
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="aaa">
<div class="picture">
<img src="images/1.jpg" style="width: 600px;height: 350px;">
<img src="images/2.jpg" style="width: 600px;height: 350px;">
<img src="images/3.jpg" style="width: 600px;height: 350px;">
<img src="images/4.jpg" style="width: 600px;height: 350px;">
<img src="images/5.jpg" style="width: 600px;height: 350px;">
</div>
<ul class="dot">
<li class="spot"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div><!--< Escape character-->
<div class="right">></div><!--> Escape character-->
</div>
<script>
var lis = document.querySelectorAll(".dot li")
var picture = document.querySelectorAll(".picture img")
var left = document.querySelector(".left")
var right = document.querySelector(".right")
var aaa = document.querySelector(".aaa")
var index = 0 //Set the index number variable picture[index].style.opacity = 1 //The first picture is displayed //Right button changes the picture right.onclick = function() {
fn("+")
}
//Left button to change the imageleft.onclick = function() {
fn("-")
}
//Timer changes the image every 3000 milliseconds var timer = setInterval(function() {
fn("+")
}, 3000)
//Mouse enters pause aaa.onmouseover = function() {
clearInterval(timer)
}
//Mouse out and continue aaa.onmouseout = function() {
timer = setInterval(function() {
fn("+")
}, 3000)
}
//Change the image when the mouse touches the dot for (var i = 0; i < lis.length; i++) {
lis[i].in = i
lis[i].onmouseover = function() {
fn(this.in)
}
}
//Function function fn(ope) {
picture[index].style.opacity = 0 //The previous picture is hidden lis[index].className = "" //Clear small dot style//Judge ope
if (typeof ope === 'number') {
index = ope
} else if (ope === '+') { //Judge whether the right button if (index === 4) {
index = 0
} else {
index++
}
} else {
if (index === 0) { //Judge whether the left button index = 4
} else {
index--
}
}
picture[index].style.opacity = 1 //Current picture displaylis[index].className = "spot" //Add style to the spot}
</script>
</body>
</html>The effect is shown in the figure:
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:
|
<<: Examples of importing and exporting MySQL table data
>>: MySQL conditional query and or usage and priority example analysis
Recommend
Mysql5.7.14 installation and configuration method operation graphic tutorial (password problem solution)
This article mainly involves solutions to problem...
In-depth analysis of MySQL explain usage and results
Preface In daily work, we sometimes run slow quer...
One question to understand multiple parameters of sort command in Linux
The sort command is very commonly used, but it al...
Analysis of three parameters of MySQL replication problem
Table of contents 01 sql_slave_skip_counter param...
Use tomcat to set shared lib to share the same jar
As more and more projects are deployed, more and ...
Linux Centos8 Create CA Certificate Tutorial
Install Required Files Yum install openssl-* -y C...
28 Famous Blog Redesign Examples
1. WebDesignerWall 2. Veerle's Blog 3. Tutori...
Analyzing Linux high-performance network IO and Reactor model
Table of contents 1. Introduction to basic concep...
Practice of implementing user login through front-end and back-end interaction of Node.js
Table of contents 1. Project Requirements Second,...
Three ways to jump to a page by clicking a button tag in HTML
Method 1: Using the onclick event <input type=...
Detailed explanation of how to configure the tomcat external server in HBuilderX to view and edit the jsp interface
1. The first method is to start the local tomcat ...
How to implement Linux automatic shutdown when the battery is low
Preface The electricity in my residence has been ...
The use of vue directive v-bind and points to note
Table of contents 1. v-bind: can bind some data t...
Detailed tutorial on installing PHP and Nginx on Centos7
As the application of centos on the server side b...
The difference between ${param} and #{param} in MySQL
The parameter passed by ${param} will be treated ...