PHP教程 Css教程 操作系统 数据库

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(){

//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({"background-color":"white","color":"black"}).next().css({"background-color":$(this).next().css("background-color"),"color":"white"});

p_ul_li++;

}

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() <= arr.length-1 && zhuangtai == false){

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

$(".p_ul_li").eq(p_ul_li).css({"background-color":"white","color":"black"}).prev().css({"background-color":$(this).prev().css("background-color"),"color":"white"});

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

p_ul_li--;

}

if(p_ul_li <0){

p_ul_li=0;

}

});

$(".p_ul_li").click(function(){

if(zhuangtai == false){

//$(this).addClass("back").siblings().removeClass("back");

$(this).css({"background-color":$(".service_scope").eq($(this).index()).css("background-color"),"color":"white"}).siblings().removeClass("back").css({"background-color":"white","color":"black"});

p_ul_li = $(this).index();

switch ($(this).index()){ //此处可以设定更多的值，只需要大于要显示的元素个数即可。条件就是Int，left就是宽度*对应的Int

case 0 : $("#content").offset({left:0});

break;

case 1 : $("#content").offset({left:-body_width});

break;

case 2 : $("#content").offset({left:-body_width*2});

break;

case 3 : $("#content").offset({left:-body_width*3});

break;

}

}

});

});

function left_yidong(){

zhuangtai=true;

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

$("#content").offset({left:$left-body_width/t});

i++;

if(i >= t){

clearInterval($left_yidong);

zhuangtai = false;

i=0;

}

}

function right_yidong(){

zhuangtai = true;

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

$("#content").offset({left:$left+body_width/t});

i++;

if(i >= t){

clearInterval($right_yidong);

zhuangtai = false;

i=0;

}

}

• 上一个： jQuery实现select模糊查询（反射机制）

• 下一个： bootstrap――bootstrapTable实现隐藏列的示例