H 5マルチキャスト図は無限マルチキャスト+ジェスチャースライド+リリースリバウンドをサポートする

41799 ワード

効果図
1枚目の効果図は無限マルチキャストの効果2枚目の効果図で、ジェスチャードラッグをサポートし、リバウンドを放す効果を示しています
具体的にはこのリンクを見ることができます:H 5 APP
Androidでは、いろいろな形のコントロールがありますが、もちろんH 5でも輪番のプラグインを見つけましたが、ジェスチャーなどの効果はサポートされていないようで、直接自分で書きました.
アプリでは、imgUrl 1、imgUrl 2、imgUrl 3、imgUrl 4の4枚の図が放送されている.
私は6つのimgコントロールを使って、imgUrl 4、imgUrl 1、imgUrl 2、imgUrl 3、imgUrl 4、imgUrl 1と表示します.
6番目のコントロールにスクロールすると、親レイアウトの位置resetを2番目の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>