25行jQuery代码实现轮播图

最新推荐文章于 2022-11-21 20:33:59 发布

空晓天

最新推荐文章于 2022-11-21 20:33:59 发布

阅读量380

点赞数 1

分类专栏：笔记文章标签： JS 前端轮播图

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

版权

笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

大家可以先看看效果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 两个事件，前者的作用是鼠标放上去时图片就会停止，后者作用刚好和前者相反，当把鼠标移出图片时，图片又开始移动

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

个人博客 http://www.sharekong.xyz 欢迎访问

空晓天

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
25行jQuery代码实现轮播图

对于刚刚学习前端的同学来说，做一个轮播图是非常不容易的今天我就将自己的心得跟和大家分享一下实现轮播图有很多方法，今天我们就讲其中一种方法——让图片显示在一行内，然后让图片有规律的向左移动第一步创建 index.html文件并输入以下代码<!DOCTYPE html><html> <head> <meta http-equiv="cont...
复制链接

扫一扫