HTML:
<!-- 轮播图 -->
<div class="lunbo">
<!-- 轮播区域 -->
<div class="lunbo_content">
<div class="imgContent">
<img draggable='false' class="imgItem activeImg Started" src="img/lunbo01.jpg">
<!-- <img draggable='false' class="imgItem" src="img/logo.png"> -->
<img draggable='false' class="imgItem Ending" src="img/lunbo02.jpg">
</div>
</div>
<!-- 导航圆点 -->
<div class="yuan">
<span class="yuanItem yuanItemActive"></span>
<!-- span class="yuanItem"></span> -->
<span class="yuanItem"></span>
</div>
</div>
JS:
// next() 方法返回被选元素的后一个同级元素。
// prev() 方法返回被选元素的前一个同级元素。
// slideDown() 方法以滑动方式显示被选元素。
// parent() 方法返回被选元素的直接父元素。
// siblings() 方法返回被选元素的所有同级元素。
// find() 方法返回被选元素的后代元素。
// slideUp() 方法以滑动方式隐藏被选元素。
// substring(开始,结束)截取字符串
$(function() {
let index = 0
let time = ''
// 鼠标滑动起始位置
let start = 0
// 鼠标滑动结束位置
let end = 0
automatic()
$("#ul>li>span").mouseenter(function() {
$(this).next().slideDown(500);
$(this).parent().siblings().find("ul").slideUp(500)
})
$("#ul").mouseleave(function() {
$(".li").find("ul").slideUp(500)
})
// 上一张事件
$(".Previous").click(function() {
Previous()
})
// 下一张事件
$(".Next").click(function() {
Next()
})
// 鼠标悬浮事件
$(".imgContent").mouseover(function() {
suspend()
})
//鼠标离开事件
$(".imgContent").mouseout(function() {
automatic()
})
// 上一张逻辑
function Previous() {
// 将原先展示(拥有activeImg类名的图片)先保存
let old = $(".activeImg")
// 隐藏先前显示的照片
old.removeClass("activeImg")
// 判断是否是第一张图片
// Started为第一张图片的独有类名,用来判断是否为第一张图片,判断上一张边界逻辑
if (old.is(".Started")) {
// 是则将最后一张图片显示
$(".Ending").addClass("activeImg")
}
// 否则显示上一张图片
old.prev().addClass("activeImg")
// 根据当前显示照片的下标决定显示的圆点
index = $(".activeImg").index()
// 调用圆点逻辑方法
yuanActive()
}
// 下一张逻辑
function Next() {
let old = $(".activeImg")
old.removeClass("activeImg")
// 判断是否是最后一张图片
// Started为最后一张图片的独有类名,用来判断是否为最后一张图片,判断下一张边界逻辑
if (old.is(".Ending")) {
$(".Started").addClass("activeImg")
}
old.next().addClass("activeImg")
$(".activeImg").index(this)
index = $(".activeImg").index()
yuanActive()
}
// 圆点显示逻辑
function yuanActive() {
let arr = $(`.yuanItem:nth-child(${index+1})`)
$(".yuanItemActive").removeClass("yuanItemActive")
arr.addClass("yuanItemActive")
}
// 计时器
function automatic() {
time = setInterval(() => {
Next()
}, 3000)
}
//悬浮暂停
function suspend() {
clearInterval(time)
}
//鼠标点击事件
$(".imgItem").mousedown(function(e) {
// console.log('x:' + e.pageX + 'y:' + e.pageY)
start = e.pageX
})
// 左键松开事件
$(".imgItem").mouseup(function(e) {
// console.log('x:' + e.pageX + 'y:' + e.pageY)
end = e.pageX
if (start - end > 100) {
// console.log("左划")
Next()
} else if (end - start > 100) {
// console.log("右划")
Previous()
}
})
CSS:
/* 轮播 */
.lunbo {
width: 100%;
height: auto;
min-width: 1200px;
}
.lunbo_content {
width: 100%;
height: auto;
z-index: 1;
}
.imgItem {
width: 100%;
height: 460px;
display: none;
}
.activeImg {
display: block;
}
.yuan {
width: 100px;
height: 50px;
line-height: 50px;
/* background-color:#463527 ; */
margin: 0 auto;
text-align: center;
z-index: 20;
margin-top: -50px;
}
.yuanItem {
display: inline-block;
width: 10px;
height: 10px;
background-color: #5f5f5f;
border-radius: 50%;
}
.yuanItemActive {
background-color: blue;
}
.Previous {
width: 40px;
height: 390px;
line-height: 390px;
background: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
color: #fff;
font-size: 34px;
text-align: center;
}
.Next {
width: 40px;
height: 390px;
line-height: 390px;
background: rgba(0, 0, 0, 0.7);
position: absolute;
right: 0;
color: #fff;
font-size: 34px;
text-align: center;
}