This article has shared the specific code of jquery to implement seamless carousel diagrams for your reference. The specific content is as follows
Implementation of functions (seamless carousel image Jquery)
Use mobile positioning to scroll seamlessly, and click to switch pictures. Each picture corresponds to a small dot, and click the small dot to switch. Move the mouse to stop the picture carousel
emphasize
jquery introduces local introduction, you can import it online
The whole situation is run through the index
Callback function in animation
Flag identification, to determine whether the animation is being executed or ended
For the processing of switching to the first or last picture
CSS code snippet
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
body{
background: rgba(0, 0, 0, 0.2);
}
.box {
width: 1000px;
height: 80%;
margin: 50px auto;
position: relative;
overflow: hidden;
box-shadow: 2px 2px 15px #333333;
}
ul {
height: 100%;
position: absolute;
display: flex;
}
ol,
ul,
li {
list-style: none;
}
li {
flex-shrink: 0;
width: 1000px;
height: 100%;
}
li>img {
width: 100%;
height: 100%;
}
button {
width: 70px;
height:50px;
color: #f5f5f5;
position: absolute;
z-index: 3;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.2);
border-radius:0 5px 5px 0;
opacity: 0;
border: none;
cursor: pointer;
outline: none;
transition: all 1s;
}
.box:hover button{
opacity: 1;
}
button:hover{
background: rgba(0, 0, 0, 0.5);
}
.left{
border-radius:0 5px 5px 0;
}
.right {
border-radius:5px 0px 0px 5px;
right: 0;
}
ol{
width: 120px;
display: flex;
/*It is not different from the float function, it is also possible to use float here*/
justify-content: space-between;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
ol li{
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #fff;
cursor: pointer;
}
.ac{
width: 25px;
transition: width 1s;
border-radius: 5px 5px 5px 5px;
}html, js code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/icon/" >
<link rel="stylesheet" href="../css/" >
<script src="../jquery-3.4."></script>
</head>
<body>
<div class="box">
<ul>
<li><img src="../images/" alt=""></li>
<li><img src="../images/" alt=""></li>
<li><img src="../images/" alt=""></li>
<li><img src="../images/" alt=""></li>
<li><img src="../images/" alt=""></li>
<li><img src="../images/" alt=""></li>
</ul>
<button class="iconfont left">&#xe60d;</button>
<button class="iconfont right">&#xe658;</button>
<ol>
</ol>
</div>
<script>
const box = $(".box");
const ul = $(box).children("ul");
const img_li = $(ul).children("li");
const len = $(img_li).length,
width = $(box).width();//Get box, i.e. li's width var flag = false; //Define an identifier to determine whether the animation has been completed var index = 0, lastIndex = 0; //Define the global index and lastIndex, which is a mark that serves as the index. $(img_li).first().clone(true).appendTo($(ul))//Clone the first picture at the end of ul //Generate all ol>li i.e. small dots for (let i = 0; i < len; i++) {
$("<li>").addClass(i === 0 ? "ac" : "").appendTo($("ol")); //The ternary operator fills the value for addClass //Set the default style for the first small dot }
//Click to switch pictures with small dots $("ol li").on('click', function () {
if (flag) return; //Identify the animation. When the animation is not completed, cancel the click event flag = true; //The animation completion is the code to execute the click event lastIndex = index; //Record the index value of the last click index = $(this).index(); // Assign the small dot's small key to index $("ol li").eq(lastIndex).removeClass("ac")
$(this).addClass("ac"); //Toggle the style $(ul).animate({ left: -index * width }, 1000, function () //Jquery's custom animation method flag = false;//The callback function will change the identifier to true after the animation is over, so as to facilitate the execution of the next click event })
})
//Click next to switch $(".right").on('click', function () {
if (flag) return;
flag = true;
lastIndex = index;
index++; //Transfer index to ++ so that it will play to the next carousel if (index === len) { //When the last clone picture is carousel index = 0; // Assign index to 0 to allow the small dot to execute normally $(ul).animate({ left: -len * width }, 1000, function () {//Let the animation continue to execute to the clone image flag = false;
$(ul).css("left", 0) // When the last clone picture is executed and the execution is completed, immediately teleport to the first picture. })
}
else {
$(ul).animate({ left: -index * width }, 1000, function () {
flag = false
})
}
$("ol li").eq(lastIndex).removeClass("ac") //Style the corresponding small dots $("ol li").eq(index).addClass("ac")
})
//Click the previous one to switch //The idea is consistent with clicking on the next one to switch $(".left").on('click', function () {
if (flag) return;
flag = true;
lastIndex = index;
index--;
if (index < 0) {
index = len - 1;
$(ul).css("left", -len * width)
$(ul).animate({ left: -index * width }, 1000, function () {
flag = false;
})
}
else {
$(ul).animate({ left: -index * width }, 1000, function () {
flag = false
})
}
$("ol li").eq(lastIndex).removeClass("ac")
$("ol li").eq(index).addClass("ac")
})
//Auto play
$(box[0]).hover(() => {
clearInterval($(box)[0].timer)
}, (function auto() {
$(box)[0].timer = setInterval(() => { //Execute the function immediately, return the auto function at the end, and let the hover leave have event execution $(".right").trigger('click');
}, 2000);
return auto;
}
)())
</script>
</body>
</html>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.