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
Implement MySQL read-write separation and load balancing based on OneProxy
Introduction Part 1: Written at the beginning One...
MySQL string splitting operation (string interception containing separators)
String extraction without delimiters Question Req...
The difference between MySQL count(1), count(*), and count(field)
Table of contents 1. First look at COUNT 2. The d...
How to use resize to implement image switching preview function
Key Points The CSS resize property allows you to ...
Solution to the problem of null column in NOT IN filling pit in MySQL
Some time ago, when I was working on a small func...
MySQL Installer 8.0.21 installation tutorial with pictures and text
1. Reason I just needed to reinstall MySQL on a n...
Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram
Table of contents Installation Steps Environment ...
MySQL performance optimization index pushdown
Index condition pushdown (ICP) is introduced in M...
A brief discussion on the magical slash in nginx reverse proxy
When configuring nginx reverse proxy, the slashes...
Steps to deploy Docker project in IDEA
Now most projects have begun to be deployed on Do...
Nginx anti-crawler strategy to prevent UA from crawling websites
Added anti-crawler policy file: vim /usr/www/serv...
MySQL Failover Notes: Application-Aware Design Detailed Explanation
1. Introduction As we all know, in the applicatio...
mysql database to retrieve the statements of seconds, minutes, hours and days before and after
Get the current time: select current_timestamp; O...
How to write beautiful HTML code
What Beautiful HTML Code Looks Like How to write ...
How to run postgreSQL with docker
1. Install Docker. Reference URL: Docker Getting ...