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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery层叠选择器用法,结合实例形式分析了jQuery层叠选择器功能、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了jquery密码强度校验，这是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2015-12-12
每次滚动的长度不要固定死，可以直接获取图片宽度作为滚动的长度。这样当你的网站有很多地方需要这个效果的时候一个函数就可以搞定了2011-12-12
jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数2015-11-11
前进与后退在浏览网页的时候是比较常见的而且非常的实用，接下来为大家分享下使用jQuery实现图片的前进与后退，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要介绍了jQuery加载及解析XML文件的方法,结合实例形式分析了xml文件的创建及jQuery针对xml文件的获取、解析相关操作技巧,需要的朋友可以参考下2017-01-01
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题，感兴趣的小伙伴们可以参考一下2016-04-04
下面小编就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了ajax+jQuery实现级联显示地址的方法,涉及jQuery操作Ajax实现级联显示的技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助2013-02-02
最新评论