怎麼樣實現jquery mobile移動端幻燈片滑動切換效果?

ADVERTISEMENT

怎麼樣實現jquery mobile移動端幻燈片滑動切換效果?

自動適應設備的寬度,滑動會切換大圖,底部導航跟隨切換。點擊底部導航切換大圖。使用的jquery_mobile插件,引入1.4.5的插件,CSS表和jquery庫即可,除了ID,CLASS命名可能會和你項目重複,改成單獨即可,其他應該沒有重複的,因為本腳本使用計時器寫的,加入了方法判定,在執行一個方法的時候,鎖定其他方法禁止執行,不會衝突,使用計時器來控製動畫,可能不盡如人意,準備重構一下改成Jquery的animate()方法來執行動畫效果。近期重構好在上傳使用內置方法不用計時器的版本吧。

ul,li,a,body,div

#nav li{

width:18%;

border:1px solid blue;

height:50px;

line-height:50px;

list-style:none;

text-align:center;

float:left;

}

.top_jt{

width:100px;

height:50px;

border:1px solid green;

text-align:center;

ADVERTISEMENT

line-height:50px;

position: fixed;

top:800px;

left:230px;

z-index:1000;

box-shadow: 1px 1px 10px #666;

}

.dingyi{

position: fixed;

top:0px;

z-index:1000;

box-shadow: 1px 1px 10px #666;

}

.p_ul_li{float:left;width:20%;height:20px;border:1px solid black;text-align:center;margin:2%;}

.p_ul

AAAAAAAAA

BBBBBBBBB

ADVERTISEMENT

CCCCCCCCC

DDDDDDDDD

A

B

C

D

//獲取當前設備寬度

var body_width = document.body.clientWidth;//當前設備寬度

var arr = document.getElementsByClassName("service_scope");//幻燈片數組

document.getElementById("content").style.width = body_width * arr.length;//幻燈片的父容器的寬度

var i;//全局計數器

var zhuangtai = false;//狀態判定,動畫效果執行的時候不能在疊加效果執行,執行完畢才能在執行新的函數

var p_ul_li=0;//底部選擇器樣式的計數器

var t = 380;//動畫效果執行時間,0.38S

var jishi = 1;//計時器每次執行時間

for(i = 0;i

arr[i].style.width = body_width;//第一種子元素的寬度,用JS動態取值賦值

}

$(function(){

$(".service_scope").swipeleft(function(){

ADVERTISEMENT

//console.log(p_ul_li);

if($(this).index() >= 0 && $(this).index()

$left_yidong = setInterval("left_yidong()",jishi);

//$(".p_ul_li").eq(p_ul_li).next().addClass("back").siblings().removeClass("back");

$(".p_ul_li").eq(p_ul_li).removeClass("back").css(

if(p_ul_li > arr.length-1){

p_ul_li = arr.length-1;

}

});

$(".service_scope").swiperight(function(){

//console.log(p_ul_li);

if($(this).index() > 0 && $(this).index() = t){

clearInterval($left_yidong);

zhuangtai = false;

i=0;

}

}

function right_yidong(){

zhuangtai = true;

$left = $("#content").position().left;

$("#content").offset();

i++;

if(i >= t){

clearInterval($right_yidong);

zhuangtai = false;

i=0;

}

}