轮播图
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<ul>
<li><img src="images/a.jpg_q90_.webp.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
<li><img src="images/e.webp.jpg" alt=""></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<span class="left"> < </span>
<span class="right"> > </span>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/my.js"></script>
</body>
</html>
2、style.css
*{
margin:0px;
padding:0px;
list-style:none;
}
div{
width:520px;
height:280px;
/* background:red; */
margin-left:auto;
margin-right:auto;
margin-top:100px;
position:relative;
overflow:hidden;
}
ul{
width:99999px;
/* transform:transalteX(-520px); */
}
ul li{
float:left;
}
ol{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
background:rgba(255,255,255,0.4);
padding-top:2px;
padding-bottom:2px;
border-radius:30px;
}
ol li{
width:8px;
height:8px;
float:left;
background:#fff;
margin-left:4px;
margin-right:4px;
border-radius:50%;
cursor:pointer;
}
.current{
background:#f60;
}
span{
position:absolute;
width:25px;
height:25px;
background:rgba(0,0,0,0.4);
top:50%;
transform:translateY(-50%);
line-height: 20px;
cursor:pointer;
text-align:center;
font-size:23px;
/* font-weight:bold; */
color:#fefecc;
}
.left{
left:0px;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
.right{
right:0px;
border-top-left-radius:12px;
border-bottom-left-radius:12px;
}
3、my.js
var n=0;
var timer;
function go(){
timer=setInterval(function(){
n=n+1
if(n>4){
n=0;
}
$('ul').css('transform',`translateX(${-520*n}px)`);
$('ol li').eq(n).addClass('current');
$('ol li').eq(n).siblings().removeClass('current');
},1000);
}
go();
$('div').hover(function(){
clearInterval(timer);
},function(){
go();
});
$('ol li').click(function(event){
n=$(this).index();
$('ul').css('transform',`translateX(${-520*n}px)`);
$('ol li').eq(n).addClass('current');
$('ol li').eq(n).siblings().removeClass('current');
});
$('.right').click(function(event){
n=n+1;
if(n>4){
n=0;
}
$('ul').css('transform',`translateX(${-520*n}px)`);
$('ol li').eq(n).addClass('current');
$('ol li').eq(n).siblings().removeClass('current');
});
$('.left').click(function(event){
n=n-1;
if(n<0){
n=4;
}
$('ul').css('transform',`translateX(${-520*n}px)`);
$('ol li').eq(n).addClass('current');
$('ol li').eq(n).siblings().removeClass('current');
});
4、效果图