H 5マルチキャスト図は無限マルチキャスト+ジェスチャースライド+リリースリバウンドをサポートする
効果図
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レイアウト
cssレイアウト
js
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>