网页常见之轮播图

   在网上访问网页最多见到的应该是轮播图，通常会在首页，如访问量很高的淘宝，京东这些商城或不知道哪里弹出来的广告，

这些均可以看到图片都不断切换，图片比文字更有诱惑别人的能力，一张优美的图片，可让人有点进出一睹的做用，而这就

已是达到作这个的做用了，但图片占位通常都是不小的，小图很难让人关注到，哪怎么办了，难道就让图片所有平铺出来

吗？有点很差吧。难道图片多时也这样干，那这个站不是成了图片展现的网站了吗？客户体验也很差，因此轮播图的做用就

出来了，占一个图片的位置，展现了多张图片，还美化了网站，更加吸引眼球。

  如今进入主题：

  最简单的轮播图其实很简单，只要会一点点的javascript的知识就能够实现了。

  首先你须要懂得基础的运算，如递增

递增例子：

var num=0;

num++;

就是增长一；

而后你要使用数组，用来模拟数据的使用的，就是存储数据使用的。

使用其来储存路径。

例子：

var img=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];

数组的声称方式有几种，本身去W3C里查。

而后就是获取元素，这个是有js知识的人，必需要懂得，全部不说。

获取页面的元素。

我这里就不写了HTML标签，直接已经有的body标签。

获取其：

var doc=document.body;

而后就是函数了，这个装载你所需变化代码了。

function fn(){
doc.style.background="url("+img[num]+") no-repeat";
num++;
num%=img.length;
}

这里教本身一招，不使用if判断，使用模%，达到图片循环。而循环的实现固然使用定时器啦~

定时器是一个神器。它让函数自动运动起来，不须要手动操做。

定时器setInterval(函数，时间);   时间是毫秒为单位的。

timer=setInterval(fn,2000);

这里函数放进定时器时不要把双括号“（）”加进去，双括号的增长是本身执行函数的意思，而这里你是要定时器

为你执行。

这里就把最简单的定时器搞定了，若是要加一些很炫的功能，就要使用一些框架，或本身编写运动框架了。

代码的完整：

var img=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];

var num=0;

var doc=document.body;

function fn(){
doc.style.background="url("+img[num]+") no-repeat";
num++;
num%=img.length;
}

timer=setInterval(fn,2000);

 

还有更难的；

就下面这个，作起来而须要的基础知识挺多的，但也脱离不了上面的这几步的作法，其实就是在以上的

作法上添加别的基础知识，运动框架。全部作轮播图基本上使用以上的思路加拓展基本没有问题。

这个num全局变量很重要。是全局。