效果圖
第一張效果圖展示的是無限輪播的效果 第二張效果圖,展示的是支援手勢拖動,放開回彈的效果
具體可以看這個連結: 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>