js原生实现简易轮播图效果，原理简单易懂

原生js实现简易的轮播图

用最基础的方式实现想不到的效果，能完成一个轮播图，能让你的兴趣大增。对于初学者来说，学完JavaScript基础知识，就要运用综合知识，实现一些网页的基础效果。如果代码，或者解析哪里有问题的，欢迎大家纠正。

原理

将图片全部重叠在一起，并且给所有的图片设置隐藏，第一张图片设置显示。然后依靠点击事件，显示出相应的图片。这样一个简单的轮播图就完成了。

首先写出静态页面

    
    
    



    

        

            
图片一
            
图片二
            
图片三
            
图片四
        
    
    

        

            
                

            
            
                

            
            
                

            
            
                

            
        
    

以及css样式

*   {
    margin:0;
    padding: 0;
}
ul  {
    list-style: none;
}
body {
    font-family: Microsoft YaHei;
}
.all{
    height: 510px;
}
.head  {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
}
.head ul{
    float: left;
}
.head ul li{
    width: 300px;
    list-style: none;
    font-size: 20px;
    padding: 11px 0;
    color:#666;
    text-align: center;
    float: left;
    border-radius:5px;
}
li:hover{
    background-color: #FFCC00;
}
.active{
    background-color:#FFCC00;
}
.main {
    width: 1200px;
    height:460px;
    margin:0px auto;
    overflow: hidden;
}
.banner {
    width: 1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    display: none;
}
.slide-active{
    display: block;
}
.slide1{
    background-image: url("../img/1.jpg");
}
.slide2{
    background-image: url("../img/3.jpg");
}
.slide3{
    background-image: url("../img/4.jpg");
}
.slide4{
    background-image: url("../img/5.jpg");
}

重点js部分

//封装一个函数，代替document.getElementById();
function byId(id){
    return typeof id=="string"?document.getElementById(id):id;
}
//获取图片以及点击框对象的引用，全局变量
var index=0,time,
    dots=byId("dots").getElementsByTagName("li"),
    pics=byId("banner").getElementsByTagName("div"),
    all=byId("all"),
    len=pics.length;
//鼠标移动轮播图上触发onmouseover鼠标事件，此时会执行函数清除定时器，停止自动轮播。
// 鼠标离开轮播图，定时器继续
all.onmouseover=function(){
    if(time){
        clearInterval(time);
    }
};
//鼠标没有放在轮播图上，触发setInterval，每两秒自动执行一次换图
all.onmouseout=function(){
    time=setInterval(function(){
        //循环图层，播放到最后一图，跳转到图一
            index++;
            if(index >= len){
                index = 0;
            }
            //index为图片的索引值，0为第一张图，1为第二张图
            changeImg();
        },2000);
};
//记得调用，否则图片不会自动执行轮播，需要手动点击点击框，触发轮播
all.onmouseout();
//遍历所有点击框，且绑定点击事件，点击点击框则会跳转到相应的图片
for(var b=0;b

总结：

实现这样一个简单的轮播图，其实不是很难。只要指导思路，多多练习并不是难事。首先创建一个div，限制其高度宽度灯。设置overflow:hidden，position:relative,将每个图片都放进这个div里面，并给他们position:absolute。这样他们就全部装进了div里面。接着添加切换的图片的点击框按钮，使其可以手动点击切换。接着通过对象的引用，以及javascript鼠标点击事件，遍历所有图片，并找到相应的索引，完成切图的效果。

好了到此为止，一个简单易懂的简易轮播图就完成了。适合才学习完JavaScript基础的同学食用，简单易懂。若要实现更复杂的效果，欢迎关注我的博客。