我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

夏天到了，我们很热，那就就写个轮播组件，看看冰爽的图片解解渴

正文

首先来讲一下思路，轮播轮播，就是轮流播放，一张图片到下一张图片，我们只要让当前图片跟下一张图片连在一起移动，就能有横向轮播的效果。先来定义一下html布局，一个可视界面的容器，一个装图片的容器，然后里面只要放两张图片，代码如下：

<div id = "imgBox"class = "imgBox">
    <div id = "sonImgBox" class = "sonImgBox">
        <img id = "image1"src="images/1.png" class = "img image1">
        <img id = "image2"class = "img subImg"src="">
    </div>
</div>

然后给容器加点样式，sonImgBox是装载图片的，我这里设置它的宽度是300%，让它能装载3张图片的，这样便于左右滚动，图片宽度设置为sonImgBox的33.33%，这样图片就刚好是可视容器的宽度。代码如下：

.imgBox{
    margin: 0 auto;
    width: 400px;
    height: 300px;
    border: 5px solid #EA6666;
    overflow: hidden;
    position: relative;
    box-shadow: 5px 5px 5px 10px #676866;
}
.sonImgBox{
    width: 300%;
    height: 100%;
    position: relative;
    left: -100%;
}
.img{
    width: 33%;
    height: 100%;
    position: absolute;
    left: 33.3%;
    top: 0;
    right: 0;
    z-index: 10;
}
.subImg{
    left: 33.3%;
    z-index: 1;
}

得到一个框框相册，效果：

接着给它加上左右按钮和图片序号，代码如下：

html:

<div id = "btnBox" class = "btnBox">                                             
     <button id = "btnLeft" class = "btn btn1" data-type = "1"> > </button> 
     <button id = "btnRight" class = "btn btn2" data-type = "-1"> < </button> |
</div>
<div class = "title">1/5</div>

css:

.btn{
    border-radius: 50%;
    margin: 0 auto;
    width: 70px;
    height: 40px;
    background-color: #EBB995;
    font-size: 30px;
    opacity: 0.5;
}
.btn1{
    position: absolute;
    right: 0px;
}
.btn2{
    position: absolute;
    left: 0px;
}
.title{
    position: absolute;
    left: 189px;
    top: 0px;
    font-family: "黑体";
    font-size: 30px;
    color: #11F0E9;
    z-index: 50;
}

效果图：

接着我们开始写逻辑，step-要移动的距离，也就是图片的宽度，btnCanClick表示是否可以点击，因为需要等移动完之后才可以继续点。

var step = 400;
var nowImgNum = 0;
var $subImg = $(".subImg");
var $nowImg = $("#image1");
var $sonImgBox = $("#sonImgBox");
var btnCanClick = true;

$(".btn").bind("click",function(evt){ 
    if(btnCanClick){
        //判断按钮是否可以点击
        btnCanClick = false;
        move($(this).data("type"));
    }
});

接着设置移动方法move方法，参数传入 type用来判断往那边移动，使用getImgNum方法获取当前图片地址，然后把subImg（下张张图片）放到前面或者后面，然后用animate方法使用整个图片容器sonImgBox移动设置好的距离，移动完成之后，再把容器sonImgBox设置回原来的位置，下次再点击同理。

function move(type){
    //让subImg在原来的基础上向左或者向右移动
    $subImg.css("left","+=" + (-type*step) + "px");
    //获取图片数组下标 的num
    var pageNum  = getImgNum(nowImgNum , type);
    nowImgNum = pageNum;
    //让subImg等于下一张图片 
    $subImg.attr("src" ,imgArry[nowImgNum]);
    console.log(nowImgNum);
    var move = "+=" + (step*type) +"px";
    $sonImgBox.animate({
            left: move
    } ,500, function(){
        //使用大框还原位置
        $sonImgBox.css("left","-400px");
        //设置nowImg显示当前的图片
        $nowImg.attr("src",imgArry[nowImgNum]);
        //让nowImg和subImg还原位置
        $nowImg.css("left","400px");
        $subImg.css("left","400px");
        btnCanClick = true;
    });
}
function getImgNum (num ,acv) {
    if(acv > 0){
        if(num == 4){
                num = 0;
        }else{
                num++;
        }
    }else{
        if(num == 0 ){
                num = 4;
        }else{
                num--;
        }
    }
    $(".title").text(num+1+ "/5");
    return num;
}

最终效果图：

我们一起写个轮播组件冰爽一下吧

前言

正文