【JavaScript】实现轮播图

学习了一段时间的JavaScript总觉得并不是非常熟练，写一个轮播图练练手。

轮播图在许多网站上都可以看到，像淘宝，京东等电商网站的首页，是不可或缺的页面元素。

先来看看实现效果吧~

轮播图效果

要求：

• 点击左右箭头可以切换图片

• 点击底部小圆点可以切换图片

• 轮播图默认自动播放，鼠标移入后停止自动播放，鼠标移出重新开始播放

---

文件结构：

代码部分：

index.html

style.css

*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
}

body{
    font-family: "微软雅黑";
    color: #000;
}

/*根据图片大小定义*/
.main{
    width: 1200px;/*图片宽度*/
    height: 460px;/*图片高度*/
    margin: 30px auto;/*图片居中*/
    overflow: hidden;/*隐藏图片超出范围的部分*/
    position: relative;
}

/*图片*/
.banner{
    width: 1200px;/*图片宽度*/
    height: 460px;/*图片高度*/
    overflow: hidden;/*隐藏图片超出范围的部分*/
    position: relative;
}

.banner-slide{
    width: 1200px;
    height: 460px;
    position: absolute;/*相对于父元素.banner的绝对定位*/
    background-repeat: no-repeat;/*图片平铺*/
    display: none;/*隐藏图片*/
}


.slide-active{
    display: block;/*设置图片显示*/
}

.slide1{
    background-image: url(../image/bg1.jpg);
    /*  
        如果直接使用backgroung属性 
        会将.banner-slide中的background-repeat属性覆盖
        所以应该使用background-image属性定义背景图片
    */ 
}

.slide2{
    background-image: url(../image/bg2.jpg);
}

.slide3{
    background-image: url(../image/bg3.jpg);
}

/*箭头按钮*/
.button{
    position: absolute;/*相对父元素.main绝对定位*/
    width: 40px;
    height: 80px;
    /*left: 244px;*/
    top: 50%;
    margin-top: -40px;
    background: url(../image/arrow.png) no-repeat center center;
}

.button:hover{
    background-color: #333;
    opacity: 0.2;
    filter: alpha(opacity=80);/*浏览器兼容*/
}

.prev{
    transform: rotate(180deg);/*图片旋转180度*/
}

.next{
    right: 0;
}

/*圆点按钮*/
.dots{
    position: absolute;/*相对父元素.main绝对定位*/
    left: 50%;
    margin-left: -35px;
    bottom: 20px;
    text-align: right;
}

.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;/*添加阴影*/
    margin-left: 8px;
    cursor: pointer;
}

.dots span.active{
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;/*添加阴影*/
}

active.js

//封装一个代替getElementById()的函数
function byId(id){
    return typeof(id) 
            === "string"?document.getElementById(id):id;
}

// 全局变量
var index = 0,//图片索引
    timer = null,//定时器
    pics = byId("banner").getElementsByTagName("div"),//图片dom对象数组
    dots = byId("dots").getElementsByTagName("span"),//圆点数组
    len = pics.length//图片总数;
    // console.log(len);

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();
            // console.log(index);
        },2000);//每2秒执行一次
    }

    //自动触发鼠标离开事件
    main.onmouseout();

    //点击圆点事件
    for(var d = 0;d < len;d++){
        //给所有span添加值为d的id属性，用作span的索引
        dots[d].id = d;
        dots[d].onclick = function(){
            // console.log("clicked!");
            //改变index,为当前span的索引,即id
            // alert(this.id);
            index = this.id;
            //调用changImg()实现切换图片
            changeImg();
        }
    }

    //点击箭头事件
    //下一张
    next.onclick = function(){
        index++;
        if(index >= len) index = 0;
        changeImg();
    }
    //上一张
    prev.onclick = function(){
        index--;
        if(index < 0) index = len-1;
        changeImg();
    }
}

//切换图片
function changeImg(){
    //遍历banner下所有的div 全部隐藏
    for(var i = 0;i < len;i++){
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    pics[index].style.display = 'block';
    dots[index].className = 'active';
}

slideImg();

---

总结：

• 使用css属性时要注意属性的优先级
• JavaScript代码中可以将重复率高的代码块写成函数，以减少代码的冗余
• 这只是一个小小的例子，同志还需努力啊