文件大体分布:
其中css下为banner.css文件、js文件夹下为banner.js和jquery.js文件、images为3张图片(1.png\2.png\3.png)
banner.html文件代码如下:
<!DOCTYPE html>
<html>
<head>
<title>banner图</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/banner.css">
<script src="js/jquery.js"></script>
<script src="js/banner.js"></script>
<body>
<div class="banner">
<ul class="banner-img">
<li><img src="images/1.png"></li>
<li><img src="images/2.png"></li>
<li><img src="images/3.png"></li>
<li><img src="images/1.png"></li>
</ul>
<ul class="banner-dot">
<li class="hover"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
banner.css文件代码如下:
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.banner{
width: 1200px;
height: 400px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
.banner-img{
width: 1200px;
height: 400px;
display: flex;
position: absolute;
top: 0;
left: 0;
}
.banner-img li{
width: 1200px;
height: 400px;
}
.banner-dot{
width: 150px;
height: 15px;
display: flex;
position: absolute;
bottom:10%;
left: 44.5%;
}
.banner-dot li{
width: 10px;
height: 10px;
background: #999;
border: 1px solid #666;
margin: 10px 0px 15px 20px;
border-radius:50px;
cursor: pointer;
}
.banner-dot li.hover{
background: #fff;
}
banner.js文件代码如下:
(()=>{
var liwidth=1200;
var moved=0;
var $ul=$(".banner-img");
var $dot=$(".banner-dot");
function banner(){
moved+=1;
$ul.animate({left:-moved*liwidth},
500,()=>{
if (moved==3) {
$ul.css("left",0);
moved=0;
}
$dot.children(":eq("+moved+")").addClass("hover").siblings().removeClass("hover");
})
}
var timer=setInterval(banner,3500);
$dot.hover(
()=>{clearInterval(timer);timer="";},
()=>{timer=setInterval(banner,3500);}
);
$dot.on("mouseover","li",function(){
var $li=$(this);
var i=$li.index();
var moved=i;
$ul.stop(false).animate({left:-moved*liwidth},
500,()=>{
$dot.children(":eq("+i+")").addClass("hover").siblings().removeClass("hover");
});
})
})()
再加上常用jquery.js文件
效果图如下: