jquery plug in realizes carousel effect
- 2021-08-31 07:02:32
- OfStack
In this paper, we share the specific code of jquery plug-in to realize carousel diagram for your reference. The specific contents are as follows
Implementation of carousel map (jquery plug-in)
Need to introduce jquery plug-in and search in jquery official website
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
display: block;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
/* Style of text part */
.slider li p {
position: absolute;
width: 100%;
padding: 10px 0;
text-indent: 2em;
background-color: rgba(0, 0, 0, .6);
bottom: 0;
left: 0;
font-size: 18px;
/* Set the displacement of the text to the bottom */
transform: translate3d(0, 100%, 0);
/* Add transition */
transition: all .8s;
}
/* Current display li Text style under */
.slider li.current p {
/* Text displacement to 0 The position of, normally displayed */
transform: translate3d(0, 0, 0);
}
.slider li a {
color: #fff;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", " Song Style ";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li>
<a href="#" >
<img src="image/1.jpg" alt="">
<p> This is the first 1 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/2.jpg" alt="">
<p> This is the first 2 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/3.jpg" alt="">
<p> This is the first 3 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/4.jpg" alt="">
<p> This is the first 4 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/5.jpg" alt="">
<p> This is the first 5 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/6.jpg" alt="">
<p> This is the first 6 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/7.jpg" alt="">
<p> This is the first 7 Text description of a picture </p>
</a>
</li>
<li>
<a href="#" >
<img src="image/8.jpg" alt="">
<p> This is the first 8 Text description of a picture </p>
</a>
</li>
</ul>
<!-- Arrow -->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="../jquery-2.2.4.js"></script> //jquery Plug-ins
<script>
//1 , definition 1 Index, and set the 1 Picture is the default
var index = 0;
$('ul>li').eq(index).addClass('current').siblings().removeClass('current');
//2 Click on the right button
$('.arrow-right').click(function(){
index++;
// Determine whether the picture exceeds the last 1 Zhang, re-assign
if(index == $('ul>li').length){
index = 0;
}
showImage();
})
Implementation of left button
$('.arrow-left').click(function(){
index--;
if(index < 0) index = $('ul>li').length - 1;
showImage()
});
function showImage(){
$('ul>li').eq(index).addClass('current').fadeIn().siblings().removeClass('current').fadeOut();
}
// Realize automatic carousel
var times = '';
// Move the mouse in to stop playing
$('.slider').mouseover(function(){
clearInterval(times)
})
// Move the mouse out and stop
$('.slider').mouseout(function(){
times = setInterval(function(){
$('.arrow-right').click();
},3000)
});
$('.slider').mouseout();
</script>
</body>
</html>