javascritp实现轮播图效果

javascritp实现轮播图效果

上来应该放一张效果图片感受一下（因为没有找到合适的图片，所以只能用电脑中的画板创建了几个1200*460纯色图片）

 

我使用的是Hbuilder，感觉还是挺方便的。

1.      目录结构

 

接下来就按照我的步骤来吧！

2.      先把我们需要的图片导入到img文件下

Bg1.png bg2.png bg3.png 这是三张我们需要轮播的图片，要是实在找不到1200*460的，就用画图板创建几个纯色的吧，反正我是这么来的。

右箭头.png  （阿里巴巴矢量图http://www.iconfont.cn/）上这个网站中找一个向右的箭头就可以了，记得最后保存的时候选择一个白颜色的。

 

3.      接下来就是创建一个index.html（我想对照着上边的图片及我加的注释，应该能看懂答题的结构吧）

 

4.      再就是最最繁琐的css文件了 style.css

 

*{
    margin:0;
    padding:0;
}
 
ul{
    list-style:none;
}
 
body{
    font-family:"微软雅黑";
    color:#14191E;
}
 
.main{
    width:1200px;
    height:460px;
    margin:30pxauto;
    overflow:hidden;
    position:relative;
}
 
.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/bg1.png) ;
}
 
.slide2{
    background-image: url(../img/bg2.png) ;
}
 
.slide3{
    background-image: url(../img/bg3.png) ;
}
 
.button{
    position:absolute;
    width:40px;
    height:80px;
    left:0px;
    top:50%;
    margin-top:-40px;
    background:url(../img/箭头右.png) no-repeat center center;
    background-size:25px;
}
 
.button:hover{
    background-color:#333;
    opacity:0.5;
    filter: alpha(opacity=80);
}
 
.prev{
    transform: rotate(180deg);
}
 
.next{
    left:auto;
    right:0;
}
 
.dots{
    position:absolute;
    right:35px;
    bottom:24px;
    text-align:right;
}
 
.dotsspan{
    display:inline-block;
    width:12px;
    height:12px;
    line-height:12px;
    border-radius:50%;
    background:rgba(7,17,27,0.4);
    box-shadow:0002pxrgba(255,255,255,0.8)inset;
    margin-left:8px;
    cursor:pointer;
}
 
.dotsspan.active{
    box-shadow:0002pxrgba(7,17,27,0.4s)inset;
    background:#fff;
}

是不是很长，看起来很懵逼，没关系，我教你这么学

你要是跟着做的话，到现在，就应该可以运行出画面了，只是不会动

现在你就可以一条一条的删除css样式，在浏览器里看看到底哪里发生了变化

最后记得ctrl+z哦，要不都没了

 

5.是时候让它动起来了   创建lunbo.js

 

//封装一个获取元素的fun
function byId(id){
    return typeof(id) === "string"?document.getElementById(id):id;
}
 
//全局变量
var index = 0,
    timer= null,
    pics= byId("banner").getElementsByTagName("div"),
    dots= byId("dots").getElementsByTagName("span"),
    prev= byId("prev"),
    next= byId("next"),
    len= pics.length;              //因为图片数和小点数一样所以获取其中一个的数量就可以了
 
function slideImg(){
    var main = byId("main");
    //鼠标滑过清除定时器，离开后继续
    main.onmouseover = function(){
       //滑过清除定时器
       if (timer) {
           clearInterval(timer);
       }
    }
   
    main.onmouseout = function(){
       timer = setInterval(function(){
           index++;
           if (index >= len) {
              index= 0;
           }
           //切换图片
           changeImg();
       },3000);
    }
   
    //自动在main上出发鼠标离开的事件
    main.onmouseout();
   
    //遍历所有点击，切绑定点击事件，点击圆点切换图片
    for (var d=0;d=len){index = 0;}
       changeImg();
    }
   
   
}
 
//封装切换图片
function changeImg(){
    //遍历banner下所有的div及dots下的所有的span，将其隐藏
    for (var i = 0;i

点开浏览器看看吧，三秒或许在这个期待的瞬间有点漫长。