jQuery achieves breathing carousel effect
|
This article shares the specific code of jQuery to achieve the breathing carousel effect for your reference. The specific content is as follows Probably the idea: A breathing carousel is a carousel where images fade in and out. program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.big{
width:560px;
height:300px;
position: relative;
margin:200px auto;
border:10px solid red;
}
.big .move{
width:5600px;
height:300px;
position: absolute;
left:0;
top:0;
}
.big .move li{
/*float: left;*/
list-style: none;
display: none;
position: absolute;
top:0;
left:0;
}
.big ul .first{
display: block;
}
img{
width:560px;
height:300px;
}
.btn div{
width:40px;
height:60px;
background: red;
position: absolute;
top:50%;
margin-top:-30px;
}
.rightbtn{
right:0;
}
.circle{
position: absolute;
left:0px;
bottom:0px;
width:200px;
height:30px;
}
.circle ul{
/*overflow: hidden;*/
list-style: none;
float: left;
}
.circleUl li{
background: white;
float: left;
margin-right:10px;
width:20px;
height:20px;
border-radius:50%;
}
</style>
<body>
<div class="big">
<ul class="move">
<li class="first"> <img src="img/0.jpg" alt=""> </li>
<li> <img src="img/1.jpg" alt=""> </li>
<li> <img src="img/2.jpg" alt=""> </li>
<li> <img src="img/3.jpg" alt=""> </li>
</ul>
<div class="btn">
<div class="leftbtn"> < </div>
<div class="rightbtn"> > </div>
</div>
<div class="circle">
<ul class="circleUl">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"> </script>
<script>
// Set the first dot to red $(".circleUl li").eq(0).css("background","red");
var index = 0;
$(".leftbtn").click(function(){
// fade out the old image $(".move li").eq(index).fadeOut(400);
index--;
if(index<0){
index = 3;
}
// New image fades in $(".move li").eq(index).fadeIn(400);
// Change the color of the small dot corresponding to index$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
$(".rightbtn").click(function(){
$(".move li").eq(index).fadeOut(400);
index++;
console.log(index);
if(index == 4 ){
index = 0;
}
$(".move li").eq(index).fadeIn(400);
$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
// Small dot click event $(".circleUl li").click(function(){
// If the first dot is clicked again while the first picture is already displayed, nothing will be done if(index == $(this).index()) return;
// The old image fades out $(".move li").eq(index).fadeOut(400);
// Click on a dot and assign the index of the dot to the global variable index (update the global variable index)
index = $(this).index();
// New image fades in $(".move li").eq(index).fadeIn(400);
// Small dots change color$(this).css("background","red").siblings().css("background","white");
})
</script>
</body>
</html>Running results:
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:
|
<<: Solution to MySQL master-slave delay problem
>>: XHTML Getting Started Tutorial: XHTML Web Page Image Application
Recommend
Introduction to Linux system swap space
Swap space is a common aspect of computing today,...
Detailed analysis and testing of SSD performance issues in MySQL servers
【question】 We have an HP server. When the SSD wri...
Summary of Common Letters in Unicode
Most of the earliest computers could only use ASC...
HTML5 and jQuery to implement preview code examples before uploading local pictures
HTML5 and jQuery implement the preview of local i...
MySql multi-condition query statement with OR keyword
The previous article introduced the MySql multi-c...
Solution to "No input file specified" in nginx+php
Today, the error "No input file specified&qu...
Detailed explanation of the principle and function of JavaScript closure
Table of contents Introduction Uses of closures C...
Example of adding multi-language function to Vue background management
Table of contents 1. First, configure the main.js...
Example code of html formatting json
Without further ado, I will post the code for you...
Analysis and solution of a.getAttribute(href,2) problem in IE6/7
Brief description <br />In IE6 and 7, in a ...
Detailed process of deploying Docker to WSL2 in IDEA
The local environment is Windows 10 + WSL2 (Ubunt...
Centos8.3, docker deployment springboot project actual case analysis
introduction Currently, k8s is very popular, and ...
Detailed explanation of Docker container cross-host multi-network segment communication solution
1. MacVlan There are many solutions to achieve cr...
MySQL log settings and viewing methods
MySQL has the following logs: Error log: -log-err...
Example of how to implement a 2-column layout in HTML (fixed width on the left, adaptive width on the right)
HTML implements 2-column layout, with fixed width...