jQuery realizes respiratory carousel map
- 2021-11-29 06:03:21
- OfStack
In this paper, we share the specific code of jQuery to realize breathing carousel for your reference. The specific contents are as follows
HTML
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/01.jpg" width="500" height="200" /></li>
<li><img src="images/02.jpg" width="500" height="200" /></li>
<li><img src="images/03.jpg" width="500" height="200" /></li>
<li><img src="images/04.jpg" width="500" height="200" /></li>
<li><img src="images/05.jpg" width="500" height="200" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
CSS
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 2500px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: ' Blackbody ';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
JS code
$(function () {
var index = 0;
// Mouse move in
$('#box').mouseenter(function(){
$('#arr').show();
})
// Move the mouse out
$('#box').mouseleave(function(){
$('#arr').hide();
})
$('#right').click(function(){
if(index == $('.screen>ul>li').length-1){ // Finally 1 Zhang
index = 0;
}else {
index++;
}
$('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
// Below page number corresponds to highlight
$('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
})
$('#left').click(function(){
if(index == 0){ // No. 1 1 Zhang
index = $('.screen>ul>li').length-1;
}else {
index--;
}
$('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
// Below page number corresponds to highlight
$('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
})
// Page number click carousel picture
$('.screen>ol>li').click(function(){
index = $(this).index()
$('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
$('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
})
});