原生js实现简易的轮播图

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

原理

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

首先写出静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="all" class="all">
    <div class="head">
        <ul id="dots">
            <a href="#"><li class="active">图片一</li></a>
            <a href="#"><li class="">图片二</li></a>
            <a href="#"><li class="">图片三</li></a>
            <a href="#"><li class="">图片四</li></a>
        </ul>
    </div>
    <div class="main" id="main">
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
            <a href="">
                <div class="banner-slide slide4"></div>
            </a>
        </div>
    </div>
</div>
<script src="js/js.js">
</script>
</body>
</html>

以及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<len;b++){
    dots[b].id=b;
    //给所有的a添加id属性
    dots[b].onclick=function(){
        //因为作用域的问题，若在里面提取b则无法获取到相应的图片，通过id属性
        //触发点击事件，则可获取到某个点几款，触发了点击款事件，最后调用changImg更换到相应的图片
        index=this.id;
        changeImg();
    }
}
function changeImg() {
    //遍历所有图片，以及点击框
    for (var i=0;i<len;i++){
        //所有的图片获得display：none都将隐藏
        pics[i].style.display="none";
        dots[i].className="";
    }
    //根据index索引找到当前的div，并将它显示出来
        pics[index].style.display="block";
    //根据index索引找到当前的li,点击框的背景色缩着轮播图的变化，变化到相应的点击框
        dots[index].className="active";
}

总结：

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

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