纯前端实现—JQ轮播图（轮播图完全版）
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—JQ轮播图（轮播图完全版）相关的知识，希望对你有一定的参考价值。
实现效果：
前面有篇文讲解过鼠标轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121315021，还得鼠标点，有点麻烦，所以这篇给B格提升些！
- 实现JQ轮播图（完全版~）！
JQ轮播图
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的轮播图</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.slide{
width: 400px;
height: 300px;
margin: 200px auto;
position: relative;
/*可以试试给下面这句注释观察观察，理解更清楚*/
overflow: hidden;
}
.pic-list{
width: 2000px;
height: 300px;
position: absolute;
}
.pic-list li{
float:left;
}
.pic-list li img{
width: 400px;
height: 300px;
}
.ul1 li{
position: absolute;
top: 50%;
font-size: 50px;
transform: translateY(-50%);
width: 55px;
height: 55px;
background-color: white;
border-radius: 5px;
line-height: 55px;
text-align: center;
opacity: 0;
cursor: pointer;
}
.ul1 .right{
right: 0;
}
.ul2{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.ul2 li{
float: left;
width: 20px;
height: 20px;
border: 1px solid white;
border-radius: 50%;
margin-left: 8px;
cursor: pointer;
}
.ul2 .active{
background-color: #5c4eff;
}
</style>
</head>
<body>
<div class="slide">
<ul class="pic-list">
<li><img src="1.jpg" alt="图片出错了！"></li>
<li><img src="2.jpg" alt="图片出错了！"></li>
<li><img src="3.jpg" alt="图片出错了！"></li>
<li><img src="4.jpg" alt="图片出错了！"></li>
<li><img src="5.jpg" alt="图片出错了！"></li>
</ul>
<ul class="ul1">
<li class="left"><span><</span></li>
<li class="right"><span>></span></li>
</ul>
<ul class="ul2">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function () {
$(".right").click(function () {
next();
});
$(".left").click(function () {
pre();
});
var num = 0;
function next() {
num++;
if(num>3){
$(".pic-list").animate({left:-(num)*400},1000);
num = 0;
$(".pic-list").animate({left:0},0);
}
$(".pic-list").animate({left:-(num)*400},1000);
circle(num);
}
function pre() {
num--;
if(num<0){
num = 3;
$(".pic-list").animate({left:-(num+1)*400},0);
}
$(".pic-list").animate({left:-(num*400)},1000);
circle(num);
}
function slide() {
timer = setInterval(function () {
next();
circle(num);
},2000)
}
slide();
$(".ul2 li").click(function () {
var index = $(this).index();
$(".pic-list").animate({left:-(index)*400},1000);
circle(index);
});
$(".slide").mouseenter(function () {
clearInterval(timer);
$(".ul1 li").css("opacity","0.5");
});
$(".slide").mouseleave(function () {
slide();
$(".ul1 li").css("opacity","0");
});
function circle(index) {
$(".ul2 li").eq(index).addClass("active").siblings().removeClass("active")
}
})
</script>
</body>
</html>
以上是关于纯前端实现—JQ轮播图（轮播图完全版）的主要内容，如果未能解决你的问题，请参考以下文章