This article has shared the specific code for displaying the jQuery carousel effect for your reference. The specific content is as follows
jQ code:
Before writing jQuery code, you must lead the library. Here I am using the 3.0 library.
<script src="jquery-3.0."></script>
<script type="text/javascript">
var timer;
$(function() {
//Set the picture to move left imgshow();
//Click the pause button event $(".pause").click(function () {
clearInterval(timer);
});
//Click the play button event $(".play").click(function () {
imgshow();
});
//Click the left button $(".prev").click(function () {
imganimation("left");
});
//Click the right button $(".next").click(function () {
imganimation("right");
});
function imganimation(res) {
//The picture goes left with the carousel if(res=="right"){
//The first li of the animate() animation moves 20% to the left $(".lilist:first").animate({
"marginLeft": "-20%"
}, 700, "linear", function () {
//This li returns to its original position $(this).css("marginLeft", "0px");
//Append it to the last position of ul $(this).appendTo($(".ullist"));
});
//Set the picture carousel of small frames, the principle is consistent with the picture carousel of large frames. $(".s_lilist:first").animate({
"marginLeft": "-20%"
}, 650, "linear", function () {
$(this).css("marginLeft", "0px");
$(this).appendTo($(".s_ullist"));
});
}else {
//The picture goes to the right, the same principle as the left $(".lilist:first").animate({
"marginLeft": "20%"
}, 700, "linear", function () {
$(this).css("marginLeft", "0px");
$(".lilist:last").prependTo($(".ullist"));
});
$(".s_lilist:first").animate({
"marginLeft": "20%"
}, 650, "linear", function () {
$(this).css("marginLeft", "0px");
$(".s_lilist:last").prependTo($(".s_ullist"));
});
};
};
//The default picture automatically moves to the left function imgshow() {
timer = setInterval(function (){
imganimation("right");
} , 2000);
};
});
</script>
css style:
* {
margin: 0;
padding: 0;
}
.divbg {
width: 100%;
height: 350px;
/*overflow: hidden;*/
position: relative;
}
.mb {
width: 30%;
height: 350px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
}
.mb:first-child {
left: 0px;
}
.mb:nth-child(2) {
right: 0px;
}
.ullist {
width: 200%;
height: 350px;
margin-left: -50%;
}
.lilist {
width: 20%;
height: 350px;
list-style: none;
float: left;
}
.imglist {
width: 100%;
height: 100%;
}
.divblock{
width: 20%;
height: 70%;
border: 4px solid rgba(255, 255, 255, 0.32);
position: absolute;
z-index: 5;
left: 46%;
top: 15%;
overflow: hidden;
}
.s_mb{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 10;
}
.s_ullist{
width: 500%;
height: 100%;
margin-left: -200%;
}
.s_lilist{
width: 20%;
height: 100%;
list-style: none;
float: left;
}
.s_imglist{
height: 100%;
width: 100%;
}
.s_mb img{
margin-left: 16%;
margin-top: 65%;
cursor: pointer;
}
html style:
<div class="divbg">
<div class="divblock">
<div class="s_mb">
<img class="prev" src="./img2/btn_prev.png" />
<img class="pause" src="./img2/btn_pause.png" />
<img class="play" src="./img2/btn_play.png" />
<img class="next" src="./img2/btn_next.png" />
</div>
<ul class="s_ullist">
<li class="s_lilist">
<img class="s_imglist" src="img2/" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/" />
</li>
</ul>
</div>
<div class="mb"></div>
<div class="mb"></div>
<ul class="ullist">
<li class="lilist">
<img class="imglist" src="img2/" />
</li>
<li class="lilist">
<img class="imglist" src="img2/" />
</li>
<li class="lilist">
<img class="imglist" src="img2/" />
</li>
<li class="lilist">
<img class="imglist" src="img2/" />
</li>
<li class="lilist">
<img class="imglist" src="img2/" />
</li>
</ul>
</div>
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.