使⽤jQuery实现轮播图
⼤家好，今天给⼤家带来的就是使⽤jQuery实现⼀个简单的轮播图，实现的原理就是：
1、在⼀个区域内，设置宽⾼，超出这部分区域就要实现⼀个隐藏
2、获取图⽚的⼤⼩ 为300，索引从0开始
3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加⼀乘以图⽚的⼤⼩+px
4、当他实现滑动的时候，加⼀个animate动画的效果，就欧了
5、右边的效果和左边的⼀样，都是同理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.uli{
width: 300px;
height: 300px;
display: flex;
overflow: hidden;
}
.uli li>img{
position: relative;
left: 0px;
top: 0px;
height: 300px;
}
.uli li{
width: 300px;
height: 300px;
list-style:none;
}
.a1{
position: absolute;
top: 100px;
left: 0;
cursor: pointer;
font-size: 50px
}
.
a2{
position: absolute;
top: 100px;
left: 260px;
cursor: pointer;
font-size: 50px
}
</style>
</head>
<body>
<!-- 设置ul li 中图⽚的数量饮料的数量-->
<ul class="uli">
<li><img src="./img/⼤冰红茶.png" alt=""></li>
<li><img src="./img/⼤蜂蜜绿茶.png" alt=""></li>
<li><img src="./img/⼤龙井绿茶.png" alt=""></li>
</ul>
<!-- 两个 div 中的 span 控制右边的便签和左边的标签为点击事件 -->
<div class="pa1">
<span class="a1"><</span>
<span class="a2">></span>
</div>
jquery在线图片
<script type="text/javascript">
/
/ 写⼀个⼊⼝函数
$(function(){
// 设置图⽚的⼤⼩
var img = 300;
// 设置索引为 0
var index = 0;
// 设置图⽚的数量的长度
var option = $('.uli>li img').length;
// 左边部分开始
$('.a2').click(function(){
// 再点击事件⾥⾯执⾏回调函数
left()
})
// 函数名称 lest
function left(){
// index的索引值为 0 当他⼩于图⽚的长度的时候就让他执⾏ ++ option要执⾏减 1 否则会有⼀张空⽩的页⾯
if (index < option-1) {
index++
}else {
index = 0
}
move()
}
// 左边部分结束
// 右边部分开始
$('.a1').click(function(){
// 再点击事件⾥⾯执⾏回调函数
right()
})
function right(){
// index的索引值为 0 当他⼤于图⽚的长度的时候就让他执⾏ --
if (index > 0) {
index--
}else {
index = option-1
}
move()
}
// right left函数⾥⾯都有 move 就等于你点击你的 index 索引的时候为多少数值就会有⼏个图⽚滑过  500 为时间      function move(){
var a = -index * img + 'px'
$('.uli li>img').animate({'left':a},500)
}
})
</script>
</body>
</html>
这是以上的代码，⼤家可以动⼿试试⼩案例。
效果图让⼤家⼀睹为快。
视频放不出来只能看图⽚了
⽬前的状况就是这样哈~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。