轮播图---可以动态添加图片，（封装成一个函数）

首先，html部分非常简单，因为图片，按钮等都是在js中动态添加的。

然后就是css部分

@charset "utf-8";
html,body{
    padding:0px;
    margin:0px;
    border:0px;
}
#rq{
    position:relative;
    top:0px;
    left:0px;
    width:500px;
    height:300px;
    overflow: hidden;

    background-color: #c33;
}
.img{
    width: 500px;
    height:300px;
    overflow:hidden;
    float:left;

}
#rq_hid{
    position:absolute;
    top:0px;
    left:0px;
    width:500px;
    height:300px;
    overflow: hidden;    
    transition:left 0.5s linear;
}

#rq_hid是放置图片的div，这里采用css3中transition方法，向左以线性方式滑动。

接下来就是js部分的代码：

var _w=window;
var _d=_w.document;
var _b=_d.documentElement||_d.body;    //这三行是用短字母代写，这是非常好的习惯，尤其在代码量很大的时候，可以简写很多。

var _rq=_d.getElementById("rq");
var _rqh=_d.getElementById("rq_hid");

var imgsrc=new Array();

var nowImgId=0;

var hd;

imgsrc[0]='1.jpg';
imgsrc[1]='2.jpg';
imgsrc[2]='3.jpg';
imgsrc[3]='4.jpg';

var brn_rq=_d.createElement('div');
brn_rq.setAttribute("id","btn_rq");
brn_rq.style.cssText='position:absolute;bottom:10px;right:0px;';
_rq.appendChild(brn_rq);

btn_rq=_d.getElementById("brn_rq");

var imgObj=new Array();

for(var i=0;i<imgsrc.length;i++){
    var tem_img=_d.createElement("div");
    tem_img.className='img';
    tem_img.id='img_'+i;
    tem_img.style.cssText='500px;height:300px;';
    tem_img.innerHTML='<img src="'+imgsrc[i]+'">';
    _rqh.appendChild(tem_img);
    imgObj[i]=_d.getElementById("img_"+i);
    var tem_btn=_d.createElement("a");
    tem_btn.innerHTML=i+1;
    tem_btn.setAttribute("id","btn_"+i);
    tem_btn.style.cssText='color:#fff;background-color:#f00;padding:10px;margin-left:1px;cursor:pointer;';
    brn_rq.appendChild(tem_btn);
}

这里第一个for循环就是用js动态在html中添加<div><img>标签，以及图片右下角的超链接按钮。

for(var i=0;i<imgsrc.length;i++){
    var tem_btnc=_d.getElementById("btn_"+i);
    tem_btnc.onmouseover=function(){
        var tem_idStr=this.getAttribute("id").split("_");
        var id=parseInt(tem_idStr[1]);    
        clearInterval(hd);
        nowImgId=id;
        _rqh.style.left=-500*nowImgId+'px';    
    }
    tem_btnc.onmouseout=function(){
        h();
    }

}

_rqh.style.width=imgsrc.length*500+'px';

for(var i=0;i<imgsrc.length;i++){
    imgObj[i].onmouseover=function(){
        clearInterval(hd);
    }
    imgObj[i].onmouseout=function(){
        h();
    }
}

第二个for循环是对右下角超链接按钮添加功能，鼠标移上去之后，就会调用clearInterval();这个函数，除去图片定时移动的功能。并且还会定位到该按钮对应的图片上，是通过图片的id*图片的宽度实现的。

第三个for循环是鼠标移到图片上时，也会调用clearInterval();这个函数，使图片定时移动停下来。

function h(){
    hd=setInterval(function(){
    if((nowImgId+1)==imgsrc.length){
        nowImgId=-1;

    }
    _rqh.style.left=-500*(nowImgId+1)+'px';
    nowImgId++;
    },1000);
}
h();

最后，就是函数h()，也就是最后封装成的函数，可以直接引入该js代码，然后通过new h()，来直接使用轮播图。

 

最后的效果图，大家可以把他设置的更好看一些