Native JS to implement image carousel JS to implement small advertising plug-in
|
Recently I want to use native JS to implement some more small functions. Now I write them in the blog. You can refer to them. If you have any questions, please point them out. Carouselneed: The pictures are rotated in a loop. You can click left or right to switch. The switching state is bound to <li>. Move the mouse into the picture to hover, and move the mouse out of the picture to continue the rotation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Native js carousel image</title>
</head>
<style>
.container{
width: 100%;
height: 500px;
position: relative;
}
.content{
width: 900px;
height: 450px;
position: relative;
overflow: hidden;
border: 1px solid seagreen;
margin: 0 auto;
}
.slider-img{
width: 900px;
height: 450px;
margin: 10px auto;
}
.slider-img img{
vertical-align: top;
width: 800px;
height: 400px;
margin: 10px 50px;
display: block;
}
.left{
margin-top: -300px;
margin-left: 50px;
width: 100px;
height: 100px;
}
.left img,.right img{
width: 100px;
height: 100px;
}
.right{
margin-top: -100px;
margin-right: 50px;
float: right;
width: 100px;
height: 100px;
}
.dot{
position: relative;
top: 23%;
left: 43%;
width: 50%;
}
.dotul{
width: 450px;
}
.dotul li{
width: 20px;
height: 20px;
background-color: seagreen;
list-style: none;
float: left;
border-radius: 20px;
margin-left: 15px;
z-index: 999;
cursor: pointer;
}
.active{
background-color:orangered !important;
}
</style>
<body>
<div class="container" id="container">
<div class="content" id="content">
<div class="slider-img" id="slider" >
<a href="javascript:;" >
<img src="./img/88.jpg" alt="" id="img">
</a>
</div>
</div>
<div class="btn">
<div class="left" id="left">
<a href=" ###" ><img src=""></a>
</div>
<div class="right" id="right">
<a href=" ###" ><img src=""></a>
</div>
</div>
<div class="dot">
<ul id="ul" class="dotul">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>js code, remember to introduce JS in html when using it.
var container = document.getElementById("container");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var img = document.getElementById("img");
var ul = document.getElementById("ul");
var li = document.getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");
var num = 0;
var timer = null;
var picList = ["./img/88.jpg","./img/are.jpg","./img/family.jpg","./img/one.jpg"];
//Correspond li to list subscript //Set the method of displaying pictures. When displaying, the dot of li is bound to the picture ShowPicture = function() {
img.src = picList[num];
for(var i = 0 ; i < li.length; i++) {
li[i].className = '';
}
li[num].className = 'active';
}
//Left click, if it is already the first picture, return to the last picture left.onclick = function() {
num--;
if(num < 0) {
num = picList.length-1;
}
ShowPicture();
}
//Right click, if it is the last picture, return to the first picture right.onclick = function() {
num++;
if(num >= picList.length) { //3
num = 0;
}
ShowPicture();
}
//Click the dot to jump to the corresponding picture, and match the li and list subscripts list.index=li.index
for(var i = 0; i < picList.length ; i++) {
li[i].index = i;
li[i].onclick = function() {
num = this.index;
ShowPicture();
}
}
//Automatically rotate pictures. Remember to clear the timer each time you call it, and return the timer after the call to prevent the time difference from getting bigger and bigger autoChange = function() {
clearInterval(timer);
timer = setInterval(() => {
num++;
num %= picList.length;
ShowPicture();
}, 3000);
return timer;
}
window.onload = autoChange;
//Event img.onmouseover = function() {
clearInterval(timer);
}
img.onmouseleave = autoChange;Advertising pluginsRequirement: After the page is loaded, an ad pops up and is displayed in a carousel. Move the mouse in and hover, move the mouse out and the ad continues to display. Click X to delete.
<div id="win">
<img id = "img" />
<button id = "ad_btn">X</button>
// I am practicing, the cross is replaced by X, you can replace it with Icon when you join your own project
</div>
//The pop-up ad is displayed after the page is loaded. Click X to delete it.
var ad = document.getElementById('win');
var img = document.getElementById('img');
var ad_btn = document.getElementById('ad_btn');
var timer;
window.onload = function () {
// clearInterval(timer);
timer = setTimeout(() => {
ad.style.display = 'block';
}, 2000);
change();
}
var count=0;
var num = 0;
var imgTimer = null;
//picture srcList
var picList = ['../img/88.jpg','../img/one.jpg','../img/family.jpg','../img/are.jpg'];
function change() {
clearInterval(imgTimer)
imgTimer = setInterval(() => {
if(count === picList.length) {
count = 0;
resetShow();
} else {
startShow();
}
count++;
}, 3000);
}
function resetShow() {
img.src = picList[0];
num = 0;
startShow();
}
function startShow() {
if(num < picList.length) {
img.src = picList[num++];
} else {
resetShow();
}
}
ad_btn.addEventListener('click' , (e)=>{
ad.style.display = 'none';
clearTimeout(timer)
});
ad.addEventListener('mouseover' , ()=>{
clearInterval(imgTimer);
})
ad.onmouseleave = function() {
change();
}Implementation display:
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:
|
<<: Three implementation methods of Mysql copy table and grant analysis
>>: A brief analysis of Linux resolv.conf
Recommend
Detailed explanation of how to view MySQL memory usage
Preface This article mainly introduces the releva...
Linux user and group command example analysis [switching, adding users, permission control, etc.]
This article describes the Linux user and group c...
Three methods to modify the hostname of Centos7
Method 1: hostnamectl modification Step 1 Check t...
Detailed explanation of MySQL Explain
In daily work, we sometimes run slow queries to r...
Analysis of MySQL joint index function and usage examples
This article uses examples to illustrate the func...
Solve the problem of mysql's int primary key self-increment
Introduction When we use the MySQL database, we a...
What are HTML inline elements and block-level elements and their differences
I remember a question the interviewer asked durin...
Common repair methods for MySQL master-slave replication disconnection
Table of contents 01 Problem Description 02 Solut...
Using JavaScript to implement carousel effects
This article shares the specific code for JavaScr...
How to remount the data disk after initializing the system disk in Linux
Remount the data disk after initializing the syst...
Vue realizes picture switching effect
This article example shares the specific code of ...
Implementation of nginx multiple locations forwarding any request or accessing static resource files
This article mainly introduces the implementation...
Various methods to restart Mysql under CentOS (recommended)
1. MySQL installed via rpm package service mysqld...
Basic knowledge points of mysql worm replication
Worms replicate, as the name implies, by themselv...
JavaScript offsetParent case study
1. Definition of offsetParent: offsetParent is th...