首先 轮播的精髓就是在于图片的平滑滚动,下面图片应该能一下就看明白;
第一 我们将可视区控制在我们想呈现的内容的大小
第二 接着是在可视区内放入内容(图片);
第三 JQ效果实现 ,
中下方小圆点(按钮移入切换事件);
图片左右两侧点击切换事件;
自动播放事件;
移入图片终止播放移出开启播放;
css 以及 html 展示
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
display: block;
}
#banner {
width: 800px;
height: 533px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#banner img {
width: 800px;
height: 533px;
}
#banner .pic {
position: absolute;
left: 0;
top: 0;
width: 3200px;
}
#banner .pic li {
float: left;
}
#banner .btn {
position: absolute;
left: 50%;
bottom: 50px;
transform: translateX(-50%);
}
#banner .btn li {
float: left;
width: 20px;
height: 20px;
background-color: #ccc;
margin: 0 5px;
border-radius: 50%;
font-size: 0;
}
#banner .btn .active {
background-color: orangered;
}
#banner .LRbtn {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.LRbtn span {
float: left;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.5);
font-size: 20px;
line-height: 30px;
text-align: center;
color: black;
cursor: pointer;
}
#banner .LRbtn .right {
float: right;
}
</style>
</head>
<body>
<div id="banner">
<ul class="pic">
/* 图片这里用的百度壁纸在线图片 可自行更换为自己本地或去图库复制在线图片地址*/
<li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201306%2F23%2F110328s72xxse7lfis9fnd.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=563102829f4ca7e9b0d271bfcfdbf786"
alt="" /></li>
<li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F6159252dd42a28348c779b1b58b5c9ea14cebfc9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=a83d49c2dcaccbfc917770d883087f32"
alt="" /></li>
<li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F1e30e924b899a90151fa90991f950a7b0308f556.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=b676c97b953d97565dcc882b7cae07db"
alt="" /></li>
<li><img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/cf1b9d16fdfaaf51147b13c38e5494eef01f7a36.jpg"
alt="" /></li>
</ul>
<ul class="btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="LRbtn">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>
样式呈现效果
JQuery代码呈现
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var index = 0;
// 定义一个初始值
var picwidth = $('.pic li img').width();
// 一张图片的宽度
var timer = '';
//声明一个定时器
$('.btn li').mouseenter(function(){
//小按钮移入事件
index = $(this).index()-1;
// 减一是因为move 函数自身+1;
move();
//move()方法最在下方
});
timer = setInterval(move,1000); // 自动播放
$('.left').click(function () {
//点击切换 左
index -= 2;
move();
});
$('.right').click(function () {
//点击切换 右
move();
});
function move() { //运动函数
index++ ;
if (index < 0) { //当状态值时为0时 使图片跳转到最后张图
index = 3;
$('.pic').stop().animate({'left': -index * picwidth})
}
if (index == 4) {//当状态值时为4时 使图片跳转到第一张图
index = 0;
$('.pic').stop().animate({'left': 0})
}
// ul 宽度随状态值切换
$('.pic').stop().animate({'left': -index * picwidth}) ;
// 小按钮类名随状态值切换
$('#banner .btn li').removeClass('active').eq(index).addClass('active') ;
}
// 移入清除定时器 //移出开始定时器
$('#banner').hover(function(){ clearInterval(timer);},function(){ timer = setInterval(move,1000);});
</script>
以上就是Jquery实现轮播图的步骤与原理。