This article has shared the specific code for implementing simple carousel diagrams for your reference. The specific content is as follows
1. Basic structure of writing to web pages
body:
Set a container with id wrap on the outermost part of the web page to replace the body, so that we can do some initialization
css:
initialization:
Including margin margin, inner margin padding, link a, picture img, input box input, list ul, li, web page html, body, a series of initializations
css settings:
Set the carousel image width according to the number of pictures and the width of the picture
2. Setting js logic
The functions that need to be completed are:
1. Move the mouse into the carousel image and gradually appear left and right floating blocks
2. Click on the floating block to switch the picture
3. Click the small dot to switch the picture
4. Switch pictures and switch small dots
5. Automatic playback
6. Move the mouse into the carousel image and automatically play it stops, move out to resume 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">
=function(){
var bannerLeft=('.banner .left');
var bannerRight=('.banner .right');
var banner=('.banner')
var bannerList=('.banner .bannerList')
var liList=('.banner .bannerList li')
var pointList=('.banner .point li')
var start=-600;
timer2=setInterval(function(){ //Set the timer and play automatically var a=30;
var index=/-600+1;
if(==-4200){
=-600+'px' //Seamless operation index=2;
}
if(==-3600){
index=1;
}
for(var i=0;i<;i++){
pointList[i].='grey'
}
pointList[index-1].='red';
timer3=setInterval(function(){
a=a-1
=-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(==-4200){
=-600+'px';
}
},4000)
// Create a moving-in occurrence function ('mouseover',occur)
function occur(){
=1; //Moving in gradually appears =1;
clearInterval(timer2); //Move in and cancel automatic playback }
('mouseout',function(){
=0;
=0; //Remove out and disappear timer2=setInterval(function(){ //Remove automatic playback var a=30;
timer3=setInterval(function(){
a=a-1
=-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(==-4200){
=-600+'px';
}
},4000)
})
//Set the left and right floating blocks to change color and scroll function colorChange(){
='black';
if(=='right'){ //Judge which side is clicked var index=/-600+1;
var a=30;
timer=setInterval(function(){ //Click on the floating block to switch the picture a=a-1;
=-20+'px';
if(a!=0){
('mousedown',colorChange)
('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
('mousedown',colorChange)
('mousedown',colorChange)
}
},30)
if(==-4200){
=-600+'px'
index=2;
}
if(==-3600){
index=1;
}
for(var i=0;i<;i++){
pointList[i].='grey'
}
pointList[index-1].='red';
}
else{
var a=30;
var index=/-600-1;
timer=setInterval(function(){
a=a-1;
=+20+'px';
if(a!=0){
('mousedown',colorChange)
('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
('mousedown',colorChange)
('mousedown',colorChange)
}
},30)
if(==0){
=-3600+'px'
index=5;
}
if(==-600){
index=6;
}
for(var i=0;i<;i++){
pointList[i].='grey'
}
pointList[index-1].='red';
}
}
function colorReturn(){
='white'
}
('mousedown',colorChange)
('mousedown',colorChange)
('mouseup',colorReturn)
('mouseup',colorReturn)
for(var i=0;i<;i++){
pointList[i].onmousedown=function(){
for(var i=0;i<;i++){
pointList[i].='gray'
}
='red';
for(var b=0;b<;b++){
if(pointList[b].==){
var a=30;
var step=-(b+1)*;
timer1=setInterval(function(){
a=a-1;
=+step/30+'px';
if(a!=0){
('mousedown',colorChange)
('mousedown',colorChange)
}
if(a==0){
clearInterval(timer1)
('mousedown',colorChange)
('mousedown',colorChange)
}
},20)
}
}
}
}
}
</script>
</head>
<body>
<div >
<!-- Write out the carousel frame -->
<div class="banner">
<ul class="bannerList">
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
<li>
<img src="./img/">
</li>
</ul>
<!-- Two arrows on the left and right -->
<span class="left"> < </span>
<span class="right"> > </span>
<!-- Add small 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 the picture with other pictures can achieve different carousel pictures. It is worth mentioning that the carousel pictures of six pictures need to be played with eight pictures, the eighth picture is consistent with the second picture, the first picture is consistent with the seventh picture, and the real presentation is only the second to the seventh picture.
Wonderful topic sharing:jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.