纯前端实现—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轮播图（轮播图完全版）的主要内容，如果未能解决你的问题，请参考以下文章