所运用到的方法
// 根据jQuery的淡入淡出实现
// 用到的jQuery方法
fadeIn();//淡入
fadeOut();//淡出
addClass();//给该元素添加一个class类名
siblings();//用于选取每个匹配元素的所有同辈元素(不包括自己),并以jQuery对象的形式返回。
eq():
//用于获取匹配元素集合中特定位置的元素。这个方法的参数是一个索引值,
// 它返回的是集合中对应索引位置的元素。需要注意的是,
// 这个索引是基于 0 的,也就是说,第一个元素的索引是 0,
// 第二个元素的索引是 1,依此类推。
$('div').eq(1) // 返回第二个<div>元素
HTML
<!-- 轮播图 -->
<div class="Carousel_frame">
<!-- 左右按钮 -->
<div class="curBox">
<div class="curBox_left" id="LeftBox"></div>
<div class="curBox_right" id="RightBox"></div>
</div>
<!-- 三个圆点 -->
<ul class="circularBox">
<li class="circularBox_li active"></li>
<li class="circularBox_li"></li>
<li class="circularBox_li"></li>
</ul>
<ul class="CarouselBox" id="CarouselBox">
<li class="CarouselBox_li" id="box">
<img src="./img/one.png" alt="">
</li>
<li class="CarouselBox_li">
<img src="./img/two.png" alt="">
</li>
<li class="CarouselBox_li">
<img src="./img/three.png" alt="">
</li>
</ul>
</div>
CSS
/* 轮播图 */
.widths{
width: 1224px;
}
.curBox{
width: 100%;
height: 50px;
position: absolute;
left: 0;
top:50%;
z-index: 999;
display: flex;
justify-content: space-between;
}
.curBox_left{
width: 50px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
.curBox_right{
width: 50px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
.circularBox{
position: absolute;
width: 80px;
height: 20px;
bottom: 20px;
display: flex;
justify-content: space-between;
left: calc( 50% - 40px );
z-index: 999;
}
.circularBox>li{
width: 20px;
height: 100%;
border-radius: 50%;
border: 1px solid rgb(213, 213, 213);
cursor: pointer;
}
.Carousel_frame{
width: 1224px;
height: 500px;
margin: 130px auto 44px auto;
position: relative;
overflow: hidden;
position: relative;
}
.active{
background-color: #4EA7E2;
}
.CarouselBox{
position: absolute;
left: 0;
padding: 0;
width: 3672px !important;
height: 500px !important;
display: flex;
}
.CarouselBox_li{
width: 1224px;
height: 500px;
}
.CarouselBox_li>img{
width: 100%;
height: 100%;
}
JS
var index = 0;
// 自动轮播
var time;
autoplay();
function autoplay() {
time = setInterval(() => {
next_pic();
console.log(111);
}, 2000)
}
// 点击上一张
$("#LeftBox")[0].onclick = () => {
prev_pic();
}
// 点击下一张
$("#RightBox")[0].onclick = () => {
next_pic();
}
// 悬浮停止
$(".Carousel_frame")[0].onmouseover = () => {
clearInterval(time);
}
// 移出继续
$(".Carousel_frame")[0].onmouseout = () => {
autoplay();
}
// 点击小圆点显示对应图片
var dot = $(".circularBox_li")
console.log(dot);
for (let i = 0; i < dot.length; i++) {
dot[i].onclick=()=>{
index = i
addStyle()
}
}
// 控制图片显示隐藏,小圆点背景色
function addStyle() {
$(".CarouselBox_li").eq(index).fadeIn();//淡入
$(".CarouselBox_li").eq(index).siblings().fadeOut();//淡出
$(".circularBox_li").eq(index).addClass("active");
$(".circularBox_li").eq(index).siblings().removeClass("active");
}
// 下一张
function next_pic() {
index++;
if (index > 2) {
index = 0;
}
addStyle();
}
// 上一张
function prev_pic() {
index--;
if (index < 0) {
index = 2;
}
addStyle();
}