【新手上路】学做js轮播图

首先看下我们要做的效果是怎样的，如下：

上面的轮播图实现的效果有：

1.鼠标不在图片区域时，图片自动顺序播放；

2.鼠标进入到图片区域时，图片停止播放，退出时继续自动播放；

3.鼠标划过右下方的数字时，显示对应的图片。

（注：小编我用的轮播图片都是790*340）

一、布局

1）首先简单的编写一下html核心代码：

<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
效果如下：

可见，图片和序号都是一个占一行。接下来用css样式修整一下：

2）CSS样式核心代码：

*{
margin: 0px;
padding: 0px;
list-style: none;
}


.wrap{
width: 790px;     /*图片宽度*/
height: 340px;    /*图片高度*/
margin: 60px auto;   /*左右居中*/
overflow: hidden;    /*隐藏溢出*/
position: relative;
margin: 100px auto;
}


.wrap ul{
position: absolute;
}


.wrap ul li{
height: 790px;
}


.wrap ol{
position: absolute;
right: 5px;
bottom: 10px;
}


.wrap ol li{
height: 20px;
width: 20px;
background: #666;
border: solid 1px #666;
margin-left: 5px;
color: #000;
float:left;
line-height: center;
text-align: center;
cursor: pointer;   /*鼠标属性*/
}


/*选中数字高亮显示*/
.wrap ol .on{
background: #E97305;
color: #fff;
}

效果如下：

显然，设置完上面的效果是不会动的，我们接下来可以用js代码来实现动态效果。

二、js实现动态效果

具体思路：

1）页面加载时，获取整个大容器，图片ul的li和数字索引ol的li，设置索引index,设置定时器；

2）设置定时器，每隔2s自动播放，即调用切换图片函数；

3）鼠标划过图片时停止自动播放，即定时器停止；

4）鼠标离开容器时继续播放至下一张，计时器重新开始

5）遍历所有数字导航实现划过切换至对应图片。

核心代码如下：

window.onload = function(){
var wrap = document.getElementById('wrap');
var pic = document.getElementById('pic').getElementsByTagName('li');
var list = document.getElementById('list').getElementsByTagName('li');
var index = 0;
var timer = null;


// 定义并调用自动播放函数
timer = setInterval(autoPlay,2000);


// 鼠标划过整个div容器时停止自动播放
wrap.onmouseover = function(){
clearInterval(timer);
}


// 鼠标离开容器时继续播放至下一张
wrap.onmouseout = function(){
timer = setInterval(autoPlay,2000);
}


// 遍历所有数字导航实现划过切换至对应图片
for(var i = 0; i < list.length; i++){
list[i].onmouseover = function(){
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
}
}


// 定义自动播放函数
function autoPlay(){
if(++index >= pic.length)
index = 0;
changePic(index);
}


// 定义图片切换函数
function changePic(curIndex){
for(var i = 0; i < pic.length; ++i){
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}

}

以上就是用js实现简单的轮播图效果。

----------------------------------------分割线----------------------------------------------

知识点一：ul和ol的区别

ul是无序列表，所谓的无序列表只要举个例子，大家就会明白了。
     ●这是第一个列表
     ●这是第二个列表
     ●这是第三个列表
     ●这是第四个列表

ol是有序列表，同样举个例子。

  1、这是第一个列表
  2、这是第二个列表
  3、这是第三个列表
  4、这是第四个列表

这就是ul与ol的区别。
ul与ol前的符号是可以修改的。只需要修改它们的type值。
ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
通过CSS也可以在将它们前的符号改为图片，这样列表显示就会更美观了。