25行jQuery代码实现轮播图

对于刚刚学习前端的同学来说，做一个轮播图是非常不容易的
今天我就将自己的心得跟和大家分享一下
实现轮播图有很多方法，今天我们就讲其中一种方法——让图片显示在一行内，然后让图片有规律的向左移动

大家可以先看看效果http://www.sharekong.xyz/res/JS_lunbo/index.html

第一步创建 index.html文件并输入以下代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta charset="utf-8" />
		<title>JS轮播图</title>
		<link type="text/css" href="css/index.css" rel="stylesheet" />
	</head>
	<body>
		
		<div class="lb">
			<ul>
				<li><img src="img/1.png" /></li>
				<li><img src="img/2.png" /></li>
				<li><img src="img/3.png" /></li>
				<li><img src="img/4.png" /></li>
				<li><img src="img/5.png" /></li>
				<li><img src="img/1.png" /></li>
			</ul>
		</div>
		
		<script src="../jquery34/jquery-3.4.0.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

我用的是 ul来实现，大家也可以不用 ul，看个人的习惯

细心的同学可能发现了，我在放图片的时候，最后一张图片是和第一张图片是一样，之所以这样放，是因为当图片移动第五张时，如果没有第六张图片，就会出现空白，然后直接跳转到第一张图片。

如果在后面加一张和第一张图片一样的话，当移动到第六张图片的时候，我们就会感觉它已经移动第一张了，实际上它是第六张，不过一移动到第六张图片就会直接转到第一张图片，但是我们肉眼看不出来，就会给我们的感觉是图片一直往左移动

第二步给标签加一些样式，让图片可以横着排列，这里我给它取名 index.css

* {
	padding: 0;
	margin: 0;
}

.lb {
	margin: 20px auto auto auto;
	position: relative;
	width: 500px;
	height: 300px;
	overflow: hidden;
}

.lb ul {
	position: absolute;
	display: flex;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	list-style: none;
}

.lb ul li {
	display: inline-block;
	display: flex;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
}

.lb ul li img {
	width: 100%;
	height: 100%;
}

大家看到这些样式也是比较简单的，我在开始用 * ，这个是代表修饰整个页面所有的元素。里面我用了 flex （弹性布局），其实就是让图片横起来放，大家也可以用 float 浮动来实现，最终的目的就是让图片横起来。

大家看到我在 ul 中使用了 position: absolute; ，是因为我们图片要向左移动，所以让图片的父级元素设为绝对定位，这样我们就可以通过改变 ul 的 left 属性以达成向左移的效果

第三步，也是整个程序最重要的一步，JS文件我给它取名index.js

$(function(){
	/// 移动的距离
	var distance = 0;
	/// 计时器
	var inter = setInterval(function(){sss()}, 2000);
	
	function sss(){
		distance += -500;
		$("ul").animate({left: distance + 'px'}, 1000);
		if(distance == (-2500)){
			$("ul").animate({left:'0px'}, 0);
			distance = 0;
		}
		$(".ttt").text(distance);
	}
	
	$(".lb ul li img").mouseover(function(){
		clearInterval(inter);
	});
	
	$(".lb ul li img").mouseout(function(){
		inter = setInterval(sss, 2000);
	});
	
})

大家看到，JS文件中代码不是很多，其中最主要的就是这个 setInterval() 方法了，它的作用是每隔一个时间就会执行一个函数。它有两个参数：
第一个参数是每隔一段时间要执行的函数
第二个参数是时间，在这个程序中我写的是 2000 ，它代表每隔 2 秒钟就会执行前面的函数
大家可以去百度一下这个函数，我相信大家都能看得懂的，🤭
JS文件中还有 mouseover 和 mouseout 两个事件，前者的作用是鼠标放上去时图片就会停止，后者作用刚好和前者相反，当把鼠标移出图片时，图片又开始移动

希望我的心得可以给大家一些帮助，如果大家有什么问题可以在下方留言，我们可以一起探讨

大家可以去我的主页下载对应的代码文件

来源：CSDN

作者：空晓天

链接：https://blog.csdn.net/qq_43390928/article/details/103462627

标签

轮播