最近在做公司的网站，有一个轮播图的功能，网上倒是有现成的js组件，我用了一下swiper,但是发现嵌入进去时不太好用，好在公司的网站要求也不是很高，索性就使用纯的js做一下呗。
1.首先新建一个html页面，先把简单的布局做出来
我的html部分如下
<body>
<div class="wrap" id="wrap">
<ul class="pics" id="pic">
<li>
<img src="img/banner1.jpg" />
</li>
<li>
<img src="img/banner2.jpg" />
</li>
<li>
<img src="img/banner3.jpg" />
</li>
</ul>
<ol class="listNum" id="listNum">
<li class="active"><span>0</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
</ol>
</div>
</body>就做一个轮播图，为一个div,,其中轮播图中用到的三个图片用ul, 下面的ol 为轮播图索引的数字
接下来，就是对此布局进行css的样式，思路就是 外层div（wrap）的宽度跟图片li的宽度设置一样，然后整个wrap部分的overflow设置为hidden, 设置为不可见，（我这里是最简单的轮播图的实现，很适合初学者的使用）就用到了display属性的none和block的切换来实现轮播图，其他的用绝对定位，或者margin值做也是可以的，但我这里用最简单的实现，下面是我的css部分
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 1000px;
height: 400px;
border: 1px solid black;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.wrap ul{
list-style: none;
}
.wrap ul li{
width: 100%;
height: 400px;
}
.wrap img{
width: 100%;
height: 100%;
}
.listNum{
position: absolute;
bottom: 5px;
left: 45%;
}
.listNum li{
display: inline-block;
border: 1px solid black;
width: 15px;
height: 15px;
border-radius: 15px;
background-color: yellow;
}
.listNum li:hover{
cursor: pointer;
background-color: red;
}
.listNum li span{
display: none;
}
.listNum .active{
background-color: red;
}
</style>这里html部分和css部分不是重点，我这里不做说明了。
终点是接下来的javascript部分，先贴上完整的javascript代码部分
<script>
var timer = null;
var index = 0;
var wrap = null;
var pic = null;
var pics = null;
var listNum = null;
var listNumLi = null;
var timer1 = null;
var timer2 = null;
window.onload = function(){
//alert("开始");
wrap = document.getElementById("wrap");
pic = document.getElementById("pic");
pics = pic.getElementsByTagName("li");
listNum = document.getElementById("listNum");
listNumLi = listNum.getElementsByTagName("li");
//默认轮播图的第一个数字
timer1 = setInterval(autoPlay, 5000);
//出了轮播图
wrap.onmouseout = function(){
console.log("消失了");
timer2 = setInterval(autoPlay, 5000);
}
//数字索引的鼠标进入时间
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}
//进入轮播图
wrap.onmousemove = function(){
console.log("进入了");
clearInterval(timer1);
clearInterval(timer2);
}
}
function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("进来了吧index:"+index);
index = 0;
}
//alert("之后的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}
</script>这里用到了js的定时器，说到定时器，先来了解一下js中的两种定时器，
1.setTimeout(function, interval)
2.setInterval(function, interval)
这里直接粘一下网友写的区别吧
关于js中两种定时器的设置及清除
1、JS中的定时器有两种：
window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成定时器停止(但是定时器还在,只不过没用了); window.setInterval([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止; 2、JS中的定时器是有返回值的:->返回值是一个数字,代表当前是第几个定时器 var timer1=window.setTimeout(function(){},1000); //timer1->1 当前是第一个定时器
var timer2=window.setTimeout(function(){},1000); //timer2->2 当前是第二个定时器
window.clearTimeout(timer1); //->把第一个定时器清除掉,这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)、window.clearInterval(timer1);
var timer3=window.setTimeout(function(){},1000); //timer3->3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;
3、清除定时器：
window.clearInterval(timer1)/window.clearTimeout(time1)；两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别，清除定时器的时候没有区别)，并且参数不仅可以是timer，还可以是其返回值，例如1,2；需要注意的是，定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排，这点类似于银行的排队领号，即使1号的业务办理完了，后边的人仍是从2号开始继续领号，而不是重新从1开始；
总结：setTimeout 用一次（主要用于延时做某件事）
setInterval 主要用来循环做某件事
两者的使用场景不同， 这里粘一下 上面的地址：http://www.cnblogs.com/wangying731/p/5164780.html
好了说完定时器，下面就来说一说我这里轮播图的实现吧！
一。我这里用到的是过程式编程，没有用到抽象式编程
二。刚开始都是使用js来获取一些元素，这里不做介绍
三。分步骤实现
1.先实现 循环轮播
init()函数中的 这一句：
timer1 = setInterval(autoPlay, 5000);function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("进来了吧index:"+index);
index = 0;
}
//alert("之后的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}使用定时器先将 pics中的所有图片隐藏，在使用索引index来定时显示 图片 每执行一次index的值通过++index 加1 这里使用index++不行 这里的index为全局变量
这样简单的自动轮播的功能就出来了，
接下来，再做图片索引的鼠标移入事件，鼠标移入哪个索引值，就显示哪个图片，
//数字索引的鼠标进入时间
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}接下来写wrap区域的鼠标一出事件，将 timer清理掉，我第一次在这里全篇只写了一个timer ,就是init()函数中创建的也是
timer = setInterval(autoPlay, 5000);
listNum鼠标移入事件中创建的也是timer = setInterval(autoPlay, 5000);
所以在wrap区域的鼠标移除事件清楚地是timer ,具体代码如下：
<script>
var timer = null;
var index = 0;
var wrap = null;
var pic = null;
var pics = null;
var listNum = null;
var listNumLi = null;
window.onload = function(){
//alert("开始");
wrap = document.getElementById("wrap");
pic = document.getElementById("pic");
pics = pic.getElementsByTagName("li");
listNum = document.getElementById("listNum");
listNumLi = listNum.getElementsByTagName("li");
//默认轮播图的第一个数字
timer = setInterval(autoPlay, 5000);
//出了轮播图
wrap.onmouseout = function(){
console.log("消失了");
timer = setInterval(autoPlay, 5000);
}
//数字索引的鼠标进入时间
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}
//进入轮播图
wrap.onmousemove = function(){
console.log("进入了");
clearInterval(timer1);
clearInterval(timer2);
}
}
function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("进来了吧index:"+index);
index = 0;
}
//alert("之后的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}
</script>这样做的后果是，有时候wrap区域的鼠标移入时，定时器没有清理掉，导致鼠标已经放上轮播图的图片了，但是定时器还在执行，就是过一会儿轮播图的图片还是会变，这样就不行。
因为init()函数中的timer和鼠标移入数字索引时创建的timer有可能不一样，故没有清理掉，所以在代码中这两处创建不同的timer,然后再清理的时候把这两个timer都清理掉。具体代码如下：（完整的javascript代码）
<script>
var timer = null;
var index = 0;
var wrap = null;
var pic = null;
var pics = null;
var listNum = null;
var listNumLi = null;
var timer1 = null;
var timer2 = null;
window.onload = function(){
//alert("开始");
wrap = document.getElementById("wrap");
pic = document.getElementById("pic");
pics = pic.getElementsByTagName("li");
listNum = document.getElementById("listNum");
listNumLi = listNum.getElementsByTagName("li");
//默认轮播图的第一个数字
timer1 = setInterval(autoPlay, 5000);
//出了轮播图
wrap.onmouseout = function(){
console.log("消失了");
timer2 = setInterval(autoPlay, 5000);
}
//数字索引的鼠标进入时间
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}
//进入轮播图
wrap.onmousemove = function(){
console.log("进入了");
clearInterval(timer1);
clearInterval(timer2);
}
}
function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("进来了吧index:"+index);
index = 0;
}
//alert("之后的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}
</script>这样下来，一个简单的轮播图效果就做完了，只包含两个简单的功能：
1.定时轮播
2.鼠标移入轮播图数字所以区域时，对应的图片显示
但是 用鼠标拖动图片的功能还没有，下次有机会再展示吧
不积跬步，无以至千里
不积小流，无以成江海
扫一扫
1103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
