H5 轮播图 支持 无限轮播 + 手势滑动 + 放开回弹

效果图

第一张效果图展示的是无限轮播的效果 第二张效果图,展示的是支持手势拖动,放开回弹的效果

具体可以看这个链接: H5APP

思路

在Android中,总有各种成型的控件,当然我在 H5中也找到了轮播的插件,但是貌似不支持手势之类的效果,就直接自己写了.
APP中轮播的是4张图: imgUrl1, imgUrl2, imgUrl3, imgUrl4.
我则使用6个img控件,显示成: imgUrl4, imgUrl1, imgUrl2, imgUrl3, imgUrl4,imgUrl1
只要在滚动到第6个控件的时候,直接让父布局的位置 reset 到第二个 img 控件上,形成无限轮播的假象

Code

html 布局

//--------------------- slider ---------------------
// slider 是整个 轮播图 的父布局,包括了 slider_imgs, 还有指示器(白点) slider_index
<div id="slider">
    <ul id="slider_imgs">
        <li><img src="../../imgs/home_big_slider3.png" id="slider_imgs_0">li>
        <li><img src="../../imgs/home_big_slider0.png" id="slider_imgs_1">li>
        <li><img src="../../imgs/home_big_slider1.png" id="slider_imgs_2">li>
        <li><img src="../../imgs/home_big_slider2.png" id="slider_imgs_3">li>
        <li><img src="../../imgs/home_big_slider3.png" id="slider_imgs_4">li>
        <li><img src="../../imgs/home_big_slider0.png" id="slider_imgs_5">li>
    ul>

    <ul id="slider_index">
        <li id="on">li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

css 布局

/* ----------------- slider -----------------*/
#slider{
    overflow:hidden;
    clear:both;
    margin:0px 0px 40px 0px;
    width:980px;
    height:268px;
}
/* slider_imgs 其实就是包含6张图的容器, 长度自然就是 (6 * 980) 
 * 并且让第一张图隐藏起来 marginLeft = -980px
*/
#slider_imgs{
    float:left;
    margin:20px 0 0 -980px;
    width:5880px;
    height:268px;
}

#slider_imgs li{
    width:980px;
    height:268px;
    float:left;
}

#slider_imgs img{
    margin:0px 20px 0px 20px;
    width:940px;
    height:268px;
}

#slider_index{
    clear:both;
    position:absolute;
    text-align:center;
    margin: 230px 0 0 400px;
}

#slider_index li{
    width: 20px;
    height: 20px;
    border-radius:20px;
    background-color:white;
    margin-right: 20px;
}
/* 指示器选中时高亮 */
#slider_index #on{
    background-color: #E94653;
}

js

<script>

//--------------------- slider logic ---------------------
		/* 轮播图边界的手势滑动的因子数
		 * 毕竟是假的无限轮播,自然不能真的让第一张和第六张完全被拉出来
		 * 所以当手势拖动要主动把这两张图拖出来时,就让手势拉动的距离 * 0.3
		 * 这样当手势放开时,自然会回弹回去
		 */
        var frictioFactor = 0.3;

        var t;

        var index = 0;

        var lastTouchX = 0;

        function next(i){
        	/*
        	* 当 index = 5 时,显示的其实就应该是第2张图,那么这个动画就不能有动画效果
        	* 而是应该直接把 slider_imgs 位置重置
        	*/
            if(i == 5){
                $("#slider_imgs").css("transition-duration","0s").css("transform", "translate3d( " + 0*(-980) + "px,0px,0px)");
            }else{
                $("#slider_imgs").css("transition-duration","2s").css("transform", "translate3d( " + i*(-980) + "px,0px,0px)");
            }
            // 更新指示器
            t = setTimeout("updateBannerPoint("+ i +")", 1800);
            lopperLogic();
        }

        function updateBannerPoint(updateIndex){
            $("#slider_index #on").removeAttr("id");
            var onIndex = 0;
            if(updateIndex == 4 || updateIndex == 5){
                onIndex = 0;
            }else{
                onIndex = updateIndex;
            }
            $("#slider_index li:eq("+ onIndex +")").attr("id", "on");
        }

        function lopperLogic(){
            index++;
            // 当 index >= 6 ,就从1重新开始,从1开始是因为,第1张图永远不会有主动显示的时候
            if(index >= 6){
                index = 1;
            }
            /* 每一张图是 显示 2s,位移动画 2s
             * 由于每一张图的位移动画是 2s,而第一张图是一进来就设置好的位置
             * 所以当 index = 1时,显示2s就直接进入位移动画
             * 而当 index= 5 时,下一个动画其实显示的就是第一张图,而在 next(i) 对于 5 有特殊处理
             */
            if(index == 1 || index == 5){
                t = setTimeout("next("+index+")", 2000);
            }else{
                t = setTimeout("next("+index+")", 4000);
            }
        }

        function resetParams(resetIndex){
            index = resetIndex;
            lastTouchX = 0;
            clearTimeout(t);
        }
		/*
		 *调用这个方法是为了每次load该html时,把轮播图之前的状态 reset
		 *在开发时发现,load(path)时,总会有残留状态,导致轮播图逻辑错乱
		*/
        resetParams(0);
        /*
		 *轮播逻辑启动
		*/
        lopperLogic();

        function registerSliderTouchListeners(){
            for(var j=0; j<6; j++){
                var id = "#slider_imgs_" + j;
                $(id).on('touchstart',touch);
                $(id).on('touchmove',touch);
                $(id).on('touchend',touch);
                $(id).on("click",touch);
            }
        }

        function touch(event){
            switch(event.type){
                case "click":
                    window.console.log("click" + index);
                break;

                case "touchstart":
                	// 当 手势开始 就清除所有轮播事件
                    clearTimeout(t);
                    lastTouchX = event.targetTouches[0].clientX;
                break;

                case "touchmove":
                    var sliderImagesPosition = $("#slider_imgs").position().left;
                    var moveDiff = event.targetTouches[0].clientX - lastTouchX;
                    lastTouchX = event.targetTouches[0].clientX;
                    if(sliderImagesPosition >=0 || sliderImagesPosition <=-2940){
                        moveDiff = moveDiff * frictioFactor;
                    }
                    computeIndex(sliderImagesPosition);
                    $("#slider_imgs").css("transition-duration","0s").css("transform", "translate3d( " + ($("#slider_imgs").position().left + moveDiff) + "px,0px,0px)");
                break;

                case "touchend":
                    $("#slider_imgs").css("transition-duration","1s").css("transform", "translate3d( " + index*(-980) + "px,0px,0px)");
                    setTimeout("updateBannerPoint("+ index +")", 1000);
                    clearTimeout(t);
                    lopperLogic();
                break;
            }
        }

        function computeIndex(sliderImagesPosition){
            if(sliderImagesPosition >=0 || sliderImagesPosition >= (-490 - 980*0)){
                index = 0;
            }else if(sliderImagesPosition < -490 && sliderImagesPosition >= (-490 - 980*1)){
                index = 1;
            }else if(sliderImagesPosition < (-490 - 980*1) && sliderImagesPosition >= (-490 - 980*2)){
                index = 2;
            }else if(sliderImagesPosition < (-490 - 980*2) && sliderImagesPosition >= (-490 - 980*3)){
                index = 3;
            }else if(sliderImagesPosition < (-490 - 980*3) && sliderImagesPosition >= (-490 - 980*4)){
                index = 4;
            }
        }
		// 注册手势监听器
        registerSliderTouchListeners();
</script>