jq实现轮播效果（切换效果为渐隐渐显）
程序员文章站
2022-06-11 17:01:51
...
1、效果图
可以自动播放，点击下方小原点可切换图片
2、完整代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播demo</title>
<link href="lunbo.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="lunboDemo">
<div class="content">
<section>
<div>img1</div>
<div>img2</div>
<div>img3</div>
<div>img4</div>
</section>
<span class="leftBtn"> <</span>
<span class="rightBtn"> ></span>
<ul class="dotIcon">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="lunbo.js"></script>
</body>
</html>
css
.lunboDemo{
position: relative;
}
.leftBtn:hover,.rightBtn:hover{
cursor: pointer;
}
.leftBtn,.rightBtn{
position: absolute;
width: 50px;
height: 50px;
background-color: black;
color: white;
line-height: 50px;
text-align: center;
z-index: 99;
opacity: 0.5;
}
.leftBtn{
top: 40%;
left: 0;
}
.rightBtn{
top: 40%;
right: 0;
}
.content{
margin: 100px auto 10px auto;
width: 1200px;
height: 300px;
background-color: #a3a8a8;
position: relative;
}
.content div{
position: absolute;
width: 1200px;
height: 300px;
color: white;
line-height: 300px;
text-align: center;
display: none;
}
.content div:nth-of-type(1){
display: block;
background-color: #4c3da8;
}
.content div:nth-of-type(2){
background-color: #1492a8;
}
.content div:nth-of-type(3){
background-color: #8da86f;
}
.content div:nth-of-type(4){
background-color: #a83c39;
}
.dotIcon{
display: flex;
justify-content: space-between;
width: 100px;
margin: 0 auto;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
z-index: 999;
}
.dotIcon .active{
width: 30px;
background-color: white;
}
ul {
padding-inline-start: 0px !important;
}
.dotIcon li{
width: 10px;
height: 10px;
background-color: #a3a8a8;
list-style: none;
border-radius: 20px;
transition: all .5s;
}
.dotIcon li:hover{
cursor: pointer;
}
js
let index=0;
function clickRight(){
index=index+1
if (index > 3) {
index=0
}
change(index)
}
function clickLeft(){
index=index-1
if (index < 0) {
index=3
}
change(index)
}
function change(index) {
$('.content div').eq(index).fadeIn().siblings().fadeOut()
$('.dotIcon li').eq(index).addClass('active').siblings().removeClass('active')
}
$('.rightBtn').on('click',clickRight)
$('.leftBtn').on('click',clickLeft)
let time=setInterval(clickRight,2000)
$('.content').on('mouseenter',function () {
clearInterval(time)
})
$('.content').on('mouseleave',function () {
time=setInterval(clickRight,2000)
})
$('.dotIcon li').on('click',function () {
index=$(this).index()
change($(this).index())
})
上一篇： 封装一个PDO数据库操作类代码_PHP
下一篇： Oracle ADF 表实现下拉联动