如何用jquery制作轮播图

文件大体分布：

其中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文件

效果图如下：

如何用jquery制作轮播图

猜你喜欢