原生js轮播图的实现

1. 轮播图总体分析

效果图

上面就是一个完整轮播图的整体效果图,可以从上分析,大致可以分为以下几个模块:

  • 图片展示模块
  • 右下角的数字导航
  • 上一张,下一张

2. 轮播图具体分析

  • HTML布局,布局思路是:最外层的box是相对定位,imgbox正常布局,左右箭头采用绝对定位,来控制垂直居中,数字导航也采用绝对定位。
<!--最外层容器-->
<div class="box" id="box">
    <!--图片容器-->
    <div class="imgbox" id="imgbox">
        <a href="#" class="show"><img src="img/img4.jpg" alt="img4"></a>
        <a href="#" class="hide"><img src="img/img5.jpg" alt="img5"></a>
        <a href="#" class="hide"><img src="img/img6.jpg" alt="img6"></a>
        <a href="#" class="hide"><img src="img/img7.jpg" alt="img7"></a>
    </div>


    <!--左右箭头-->
    <a class="prev" id="prev">&lt;</a><a class="next" id="next">&gt;</a>

    <!--数字导航-->
    <div id="points" class="points">
        <ul>
            <li><a href="#" class="active">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>
  • css样式,要注意的就是设置inline-block后的空隙问题以及ie6,7兼容问题,绝对布局是相对有定位的父布局(除static外的布局),html元素的垂直居中,具体看代码注释。
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    display: block;
}

.box {
    width: 186px;
    height: 124px;
    position: relative;
}

.imgbox {

    font-size: 0;
    /*解决inline-block的空隙问题*/
}

/*图片的显示控制*/
img {
    width: 186px;
    height: 124px;
    display: block;
    /*可以解决一些样式不一致问题*/
    border: none;
}
/*数字导航容器定位*/
.points {
    position: absolute;
    right: 0px;
    bottom: 5px;
    font-size: 0;
}

.points ul {
    list-style: none;
}

.points li {
    border-left: 1px solid #fff;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


/*数字导航正常样式*/
.points a {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-decoration: none;
    background-color: orange;
    text-align: center;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

/*show控制图片显示,hide控制图片隐藏*/
.show {
    display: block;
}

.hide {
    display: none;
}
/*数字导航鼠标滑过效果*/
.points a:hover, .points .active {
    background-color: #FF4500;
}

/*左右两按钮正常展示效果*/
.prev, .next {
    width: 24px;
    height: 36px;
    text-align: center;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, .3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#4d000000', GradientType=0);
    line-height: 36px;
    font-size: 14px;
    cursor: pointer;
}

/*左右两按钮滑过效果*/
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, .5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=0);
}

/*左右两个按钮设置垂直居中*/

.prev {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -18px;
}
.next {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px;
}
  • js逻辑实现,核心逻辑就是循环播放图片,核心函数就是setInterval(nextSlider,1000),涉及到鼠标移入移出的停止和播放,点击按钮的上一张下一张,数字导航点击到具体某一张幻灯片以及数字导航的样式改变处理,以及闭包产生的事件绑定处理问题。
window.onload = function(){

    // getElementsByClassName()ie9才支持
    //轮播的一个索引值
    var index = 0;
    //定时器
    var timer = null;
    //最外层容器
    var box = document.getElementById("box");
    //图片容器
    var imgbox = document.getElementById("imgbox");
    //图片的超链接
    var as = imgbox.getElementsByTagName("a");
    //数字导航的父容器
    var points = document.getElementById("points");
    //数字导航数组
    var pointsA = points.getElementsByTagName("a");
    //上一张,下一张
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");

    //循环播放核心
    timer = setInterval(nextSlider, 1000);
    //下一张
    function nextSlider(){

        index++;

        if(index>as.length-1){
            index = 0;
        }
        changeStyle(index);

    }
    //上一张
    function preSlider(){

        index--;
        if(index<0)
            index= as.length-1;
        changeStyle(index);
    }

    //具体控制图片的显示隐藏和按钮样式改变
    function changeStyle(index){

        for(var i=0;i<as.length;i++){
            if(index == i){
                as[i].className = "show";
                pointsA[i].className = "active";
            }else{
                as[i].className = "hide";
                pointsA[i].className = "";
            }
        }

    }

    //对数字导航按钮进行事件绑定,注意闭包

    for (var j = 0; j<pointsA.length; j++) {

        (function(j){
            pointsA[j].onclick =function(){

                changeStyle(j);
            }
        })(j);
    }

    //对上一张按钮进行事件绑定
    prev.onclick = function(){
        preSlider();
    }
    //对下一张按钮进行事件绑定
    next.onclick = function(){
            nextSlider();
    }
    //当鼠标放上去时清除定时器
    box.onmouseover = function(){

        clearInterval(timer);
    }
    //当鼠标离开时重新启动定时器
    box.onmouseout = function(){
        timer = setInterval(nextSlider, 1000);
    }
}

3. 总结

经过测试,这个例子可以兼容ie6,7等。通过此案例你可以学到以下内容:

  1. css:绝度定位和相对定位,inline-block以及产生的问题。
  2. html:搭建页面的基本结构。
  3. js:定时器的使用,事件的处理,闭包产生的问题,DOM的操作。

最后说一句,博客难免有疏漏之处,望各位大神多多指教。

代码地址:
轮播图demo下载地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值