jquery实现无缝轮播图
作者：boylzh
这篇文章主要为大家详细介绍了jquery实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现无缝轮播图的具体代码，供大家参考，具体内容如下
实现功能（无缝轮播图Jquery）
利用移动定位进行无缝滚动，大体实现点击切换图片，每张图片对应一个小圆点，并且小圆点点击可以进行切换。鼠标移入停止图片轮播
强调
jquery引入本地引入，你可以在网上导入
全局由index贯穿
动画中的回调函数
flag标识，进行判断动画在执行中还是执行结束
对于图片切换到第一张还是最后一张的处理
css代码片段
* {
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;
/*进行水平布局，与float功能并无差异，此处用float也是可以的*/
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代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/icon/iconfont.css" >
<link rel="stylesheet" href="../css/carousel.css" >
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="box">
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpeg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
</ul>
<button class="iconfont left"></button>
<button class="iconfont right"></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();//获取box也就是li的宽
var flag = false; //定义一个标识，来进行判断当次动画是否已经完成
var index = 0, lastIndex = 0; //定义全局的index，与lastIndex，也就是一个起到下标的标识
$(img_li).first().clone(true).appendTo($(ul))//克隆第一张图片放在ul的最后
//生成所有的ol>li即小圆点
for (let i = 0; i < len; i++) {
$("<li>").addClass(i === 0 ? "ac" : "").appendTo($("ol")); //三元运算符给addClass进行填值
//给第一个小圆点进行默认样式的设置
}
//小圆点点击切换图片
$("ol li").on('click', function () {
if (flag) return; //标识动画，动画未完成时，取消掉点击事件
flag = true; //动画完成是执行点击事件的代码
lastIndex = index; //记录上次的点击的index的值
index = $(this).index(); //将小圆点的小标赋值给index
$("ol li").eq(lastIndex).removeClass("ac")
$(this).addClass("ac"); //将样式进行toggle
$(ul).animate({ left: -index * width }, 1000, function () //jquery的自定义动画方法
flag = false;//回调函数将在动画结束之后将标识变为true，以便于执行下一次点击事件
})
})
//点击下一张进行切换
$(".right").on('click', function () {
if (flag) return;
flag = true;
lastIndex = index;
index++; //将index进行++，使其向下一张轮播
if (index === len) { //当轮播到最后一张clone的图片时
index = 0; //将index赋值为0，让小圆点正常执行
$(ul).animate({ left: -len * width }, 1000, function () {//让动画继续执行到clone的那张图片
flag = false;
$(ul).css("left", 0) //当执行到最后一张clone的图片，执行完成时，立马瞬移到第一张图片
})
}
else {
$(ul).animate({ left: -index * width }, 1000, function () {
flag = false
})
}
$("ol li").eq(lastIndex).removeClass("ac") //给相应的小圆点进行样式设置
$("ol li").eq(index).addClass("ac")
})
//点击上一张进行切换
//与点击下一张进行切换思想一致
$(".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")
})
//自动播放
$(box[0]).hover(() => {
clearInterval($(box)[0].timer)
}, (function auto() {
$(box)[0].timer = setInterval(() => { //立即执行函数，在最后返回出auto函数，让hover的leave有事件执行
$(".right").trigger('click');
}, 2000);
return auto;
}
)())
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。