Implementation of Simple Carousel Map by Native js
- 2021-09-04 23:21:52
- OfStack
In this paper, we share the specific code of js to realize simple carousel diagram for your reference. The specific contents are as follows
1. Write the basic structure of the web page
body:
A container with id as wrap is set on the outermost part of the web page instead of body, which is convenient for us to do some initialization
css:
Initialization:
Including outer margin margin, inner margin padding, link a, picture img, input box input, list ul, li, webpage html, body1 series initialization
css Settings:
Set the carousel width according to the number and width of pictures
2. Set js logic
The functions that need to be completed are:
1. When the mouse moves into the carousel, the left and right sliders gradually appear
2. Click the slider to switch pictures
3. Click the dot to switch the picture
4. Switch pictures and small dots
5. Auto Play
6. Move the mouse into the carousel and stop the automatic playback. Move out and resume the automatic playback
The 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">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
display: block;
}
input{
outline: none;
}
html,body{
height: 100%;
overflow: hidden;
}
.content{
position: absolute;
top: 0;
left: 0;
}
.banner{
width: 600px;
height: 400px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.banner .bannerList{
position: absolute;
left:-600px;
top: 0;
width: 4800px;
height: 100%;
}
.banner .bannerList li{
float: left;
width: 600px;
height: 400px;
}
.banner .bannerList li img{
height: 100%;
width: 100%;
}
.banner .left,.banner .right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 50px;
border: solid 2px gray;
font-size:30px;
text-align: center;
line-height: 50px;
color: rgb(255, 255, 255);
opacity: 0;
transition: 1000ms;
}
.banner .left{
left: 0px;
}
.banner .right{
right: 0px;
}
.banner .point{
position: absolute;
bottom: 30px;
left:50%;
transform: translateX(-50%);
}
.banner .point li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gray;
margin: 5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var bannerLeft=document.querySelector('.banner .left');
var bannerRight=document.querySelector('.banner .right');
var banner=document.querySelector('.banner')
var bannerList=document.querySelector('.banner .bannerList')
var liList=document.querySelectorAll('.banner .bannerList li')
var pointList=document.querySelectorAll('.banner .point li')
var start=-600;
timer2=setInterval(function(){ // Set the timer and play it automatically
var a=30;
var index=bannerList.offsetLeft/-600+1;
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px' // Seamless operation
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
// Create 1 A move-in occurrence function
banner.addEventListener('mouseover',occur)
function occur(){
bannerLeft.style.opacity=1; // Migration gradually appears
bannerRight.style.opacity=1;
clearInterval(timer2); // Move in to cancel autoplay
}
banner.addEventListener('mouseout',function(){
bannerLeft.style.opacity=0;
bannerRight.style.opacity=0; // Move out and disappear
timer2=setInterval(function(){ // Move out to resume autoplay
var a=30;
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
})
// Set the left and right sliders to change color and scroll
function colorChange(){
this.style.color='black';
if(this.className=='right'){ // Determine which side was clicked
var index=bannerList.offsetLeft/-600+1;
var a=30;
timer=setInterval(function(){ // Click the slider to switch pictures
a=a-1;
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a!=0){
bannerRight.removeEventListener('mousedown',colorChange)
bannerLeft.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px'
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
else{
var a=30;
var index=bannerList.offsetLeft/-600-1;
timer=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+20+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==0){
bannerList.style.left=-3600+'px'
index=5;
}
if(bannerList.offsetLeft==-600){
index=6;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
}
function colorReturn(){
this.style.color='white'
}
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mouseup',colorReturn)
bannerRight.addEventListener('mouseup',colorReturn)
for(var i=0;i<pointList.length;i++){
pointList[i].onmousedown=function(){
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='gray'
}
this.style.backgroundColor='red';
for(var b=0;b<pointList.length;b++){
if(pointList[b].style.backgroundColor==this.style.backgroundColor){
var a=30;
var step=-(b+1)*600-bannerList.offsetLeft;
timer1=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+step/30+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer1)
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},20)
}
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<!-- Write a carousel frame -->
<div class="banner">
<ul class="bannerList">
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
<li>
<img src="./img/james2.jpg">
</li>
<li>
<img src="./img/james3.jpg">
</li>
<li>
<img src="./img/james4.jpg">
</li>
<li>
<img src="./img/james5.jpeg">
</li>
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
</ul>
<!-- Left and right arrows -->
<span class="left"> < </span>
<span class="right"> > </span>
<!-- Add dots -->
<ul class="point">
<li style="background-color: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>Among them, replacing pictures with other pictures can realize different carousel pictures. It is worth mentioning that the carousel pictures of 6 pictures need to put 8 pictures, the 8th and 2nd pictures, the 1st and 7th pictures, and only the 2nd to 7th pictures are really presented
Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel