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
Example code for using Nginx to implement 301 redirect to https root domain name
Based on SEO and security considerations, a 301 r...
Solution to the problem that Vue binding objects and array variables cannot be rendered after changing
Project scenario: There is a <ul> tag on th...
Four solutions for using setTimeout in JS for loop
Table of contents Overview Solution 1: Closures S...
How to convert extra text into ellipsis in HTML
If you want to display extra text as ellipsis in ...
Details on using regular expressions in MySQL
Table of contents 1. Introduction 2. Prepare a pr...
Detailed explanation of MySQL data rows and row overflow mechanism
1. What are the formats of lines? You can see you...
Detailed explanation of how to use JavaScript paging component
The pagination component is a common component in...
HTML CSS3 does not stretch the image display effect
1. Use the transform attribute to display the ima...
React State state and life cycle implementation method
1. Methods for implementing components:組件名稱首字母必須大...
Detailed explanation of slots in Vue
The reuse of code in vue provides us with mixnis....
Does Mysql ALTER TABLE lock the table when adding fields?
Table of contents Before MySQL 5.6 After MySQL 5....
How to pass parameters to JS via CSS
1. Background that needs to be passed through CSS...
UDP connection object principle analysis and usage examples
I wrote a simple UDP server and client example be...
Implementing carousel effects with JavaScript
This article shares the specific code for JavaScr...
Details of 7 kinds of component communication in Vue3
Table of contents 1. Vue3 component communication...