轮播图 jquery制作 (slideshow)
2019-10-12 本文已影响0人
yxlwq
轮播图
本文会随着时间进行更正
再次更新：2019/10/12 22:35
使用jquery写了个功能基本齐全的轮播图代码，有时间写个轮播vue组件
完整代码已上传github，下载解压即可展示效果，链接见页末
先上html和js部分代码，重点理解轮播逻辑
head中部分代码：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<link rel="stylesheet" href="./jquery.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./jquery.js"></script>
</head>
body中部分代码：
<body>
<div class="slide-show"> <!--最外层div，overflow：hidden来展示图片链接-->
<div><!--包含所有图片链接的div，用来使轮播滚动（相对于父div移动）-->
<a href="#" class="slide-show-item"> <!--每个图片链接-->
<img src="./imgs/1.jpg">
</a>
<a href="#" class="slide-show-item">
<img src="./imgs/2.jpg">
</a>
<a href="#" class="slide-show-item">
<img src="./imgs/3.jpg">
</a>
<a href="#" class="slide-show-item">
<img src="./imgs/4.jpg">
</a>
<a href="#" class="slide-show-item">
<img src="./imgs/5.jpg">
</a>
</div>
<ul class="slide-select-bar"><!--轮播下方的按钮-->
<li></li><li></li><li></li><li></li><li></li>
</ul>
<ul class="go-bar"><!--左右切换按钮-->
<li></li>
<li></li>
</ul>
</div>
</body>
js中完整代码:
$(function(){ // 作用可以让我们在html中任意位置直接导入该js文件，但是jquery文件必须在该文件前面
let slideIndex = 0; // 定义展示在div中的当前图片链接下标index
let slideItem = $(".slide-show-item") // 获取全部的图片链接
let slides = $(".slide-show>div") // 获得包含全部图片链接的div
$(".slide-select-bar>li:eq("+ slideIndex +")").addClass("isTarget") // 初始化轮播图下方按钮的样式
let initTimer = setTimer() // 设置定时器，返回定时器名，用来自动给当前的index加1，且在index溢出后自动回到初始状态，setTimer是自定义函数，见代码下方
$(".slide-select-bar>li").on("mouseenter",function(){ // 设置当鼠标移入到轮播图下方按钮后的轮播动作
clearInterval(initTimer) // 为避免定时器的动画和该动画冲突，暂时清除定时器
let id = $(this).index() // 获取当前的位置
goTo(id) // goTo()是自己写的函数，传入参数后，将当前位置定位到id，且轮播，并且进行index溢出判断和调整，并同步调整轮播图下方的样式
initTimer = setTimer() // 当前动画结束，没有冲突，重新设置定时器
})
$(".go-bar>li:first").on("click",function(){ //设置点击按钮左右切换后的轮播动作
clearInterval(initTimer)
let id = slideIndex // 获取当前位置的index
Boolean(slideIndex == 0)?goTo(slideItem.length-1):goTo(--id) // 当当前位置减到0时，自动调整到最大位置
initTimer = setTimer()
})
$(".go-bar>li:last").on("click",function(){
clearInterval(initTimer)
let id = slideIndex
Boolean(slideIndex == (slideItem.length-1))?goTo(0):goTo(++id) // 当当前位置加到最大位置时，自动调整到0
initTimer = setTimer()
})
// 函数区
// goTo作用：传入targetId，自动切换到targetId位置的图片链接，当前设置为targetId，轮播图下方按钮样式自动调整
function goTo(targetId){ // targetId是需要跳转到的位置
let offset = -slideItem.width()*targetId // offset是移动到当前位置需要的偏移量
slideIndex = targetId // 设置当前位置为指定位置
slides.css("left",offset) // 跳转到指定位置
$(".slide-select-bar>li").each(function(id){ // 遍历轮播图下方的每个小条，进行样式调整
(id == slideIndex)?$(this).addClass("isTarget"):$(this).removeClass("isTarget") //当前位置位置为id时，添加当前遍历的id的背景色，当前位置不为id位置时，取消当前遍历的id的背景色
})
}
function setTimer(){ // 设置定时器，当前位置自动加1，且作出当前位置超出范围后的调整操作
return setInterval(() => { // 返回定时器名，可用于清除定时器
let id = slideIndex
Boolean(slideIndex == slideItem.length-1)?goTo(0):goTo(++id) // 当前位置溢出后的操作
}, 4000);
}
})
随手点个赞，谢谢大家
更多文章 我的github
