jquery实现无缝轮播图
更新时间：2022年05月09日 17:14:35 作者：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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Quicksand这是一个非常不错的 jQuery 插件，用于实现动画洗牌效果，十分的实用，有需要的小伙伴可以参考下。2015-05-05
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
jquery-slider幻灯片插件通过json数据来提供图片地址和描述信息，同时也可以更换json数据来动态切换不同的图片，对json数据jquery幻灯片插件相关知识感兴趣的朋友一起学习吧2016-08-08
利用jQuery弹出select选择的值,当单击按钮的时候就会执行的一个方法，它的作用就是alert select值2013-04-04
这篇文章主要介绍了jQuery插件artDialog.js使用与关闭方法,结合具体实例形式分析了jQuery弹出窗口插件artDialog.js的简单使用方法及相关注意事项,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了jQuery实现树形员工信息表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了jQuery和HTML对某个标签设置只读或者禁用属性的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
jQuery中parents()和parent()的区别分析
这篇文章主要介绍了jQuery中parents()和parent()的区别,具体分析了parents()和parent()的原理与用法区别,非常具有实用价值,需要的朋友可以参考下2014-10-10
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
这篇文章主要介绍了jQuery leonaScroll 1.1 自定义滚动条插件(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起通过本篇文章学习jquery.extend函数及用法详解吧2015-09-09
寻寻觅觅，觅觅寻寻终于找到了一些关于jquery性能优化的文章，果断收藏当然不能忘了加上自己的一些总结及理解。2014-05-05
最新评论