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
4 flexible Scss compilation output styles
Many people have been told how to compile from th...
How to install Linux flash
How to install flash in Linux 1. Visit the flash ...
Three notification bar scrolling effects implemented with pure CSS
Preface The notification bar component is a relat...
The design process of Alibaba's Mid-Autumn Festival logo combined with the website
<br />First think of the idea, then draw a s...
The difference between the name and id of the a tag's target pointing to the iframe
Copy code The code is as follows: <iframe id=&...
The difference between MySQL database host 127.0.0.1 and localhost
Many of my friends may encounter a problem and do...
When to use table and when to use CSS (experience sharing)
The main text page of TW used to have a width of 8...
Problems with nodejs + koa + typescript integration and automatic restart
Table of contents Version Notes Create a project ...
Vue implements Modal component based on Teleport
Table of contents 1. Get to know Teleport 2. Basi...
MySQL database master-slave configuration tutorial under Windows
The detailed process of configuring the MySQL dat...
How to run MySQL in Docker environment and enable Binlog to configure master-slave synchronization
The same server simulates the master-slave synchr...
Explanation of factors affecting database performance in MySQL
A story about database performance During the int...
A brief discussion on MySQL event planning tasks
1. Check whether event is enabled show variables ...
Vue implements click and passes in event objects and custom parameters at the same time
Just pass in custom parameters HTML <div id=&q...
Install Docker environment in Linux environment (no pitfalls)
Table of contents Installation Prerequisites Step...