对于刚刚学习前端的同学来说，做一个轮播图是非常不容易的
今天我就将自己的心得跟和大家分享一下
实现轮播图有很多方法，今天我们就讲其中一种方法——让图片显示在一行内，然后让图片有规律的向左移动
大家可以先看看效果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 秒钟就会执行前面的函数
大家可以去百度一下这个函数，我相信大家都能看得懂的，
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
