jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
更新時(shí)間：2020年04月15日 16:04:40 作者：天步
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果，實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
自動(dòng)適應(yīng)設(shè)備的寬度，滑動(dòng)會(huì)切換大圖，底部導(dǎo)航跟隨切換。點(diǎn)擊底部導(dǎo)航切換大圖。使用的jquery_mobile插件，引入1.4.5的插件，CSS表和jquery庫(kù)即可，除了ID,CLASS命名可能會(huì)和你項(xiàng)目重復(fù)，改成單獨(dú)即可，其他應(yīng)該沒有重復(fù)的，因?yàn)楸灸_本使用計(jì)時(shí)器寫的，加入了方法判定，在執(zhí)行一個(gè)方法的時(shí)候，鎖定其他方法禁止執(zhí)行，不會(huì)沖突，使用計(jì)時(shí)器來控制動(dòng)畫，可能不盡如人意，準(zhǔn)備重構(gòu)一下改成Jquery的animate()方法來執(zhí)行動(dòng)畫效果。近期重構(gòu)好在上傳使用內(nèi)置方法不用計(jì)時(shí)器的版本吧。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jsmobile/jquery.mobile-1.4.5.min.css">
<script src="js/jquery183.min.js"></script>
<script src="jsmobile/jquery.mobile-1.4.5.min.js"></script>
<style>
ul,li,a,body,div{
margin:0px;
list-style:none;
}
#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;
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{width:100%;padding:0px;}
.back{background-color:red;color:white;}
</style>
</head>
<body>
<div data-role="page" id="pageone" >
<!--引用頁頭-->
<iframe src="header.html" width="100%" height="50" frameborder="0">
</iframe>
<div data-role="content">
<div class="container" id="container" style="width:100%;overflow:hidden;">
<div class="content" id="content" style="overflow:hidden;">
<div class="service_scope" style="height:300px;background-color:red;float:left;">
AAAAAAAAA
</div>
<div class="service_scope" style="height:300px;background-color:blue;float:left;">
BBBBBBBBB
</div>
<div class="service_scope" style="height:300px;background-color:green;float:left;">
CCCCCCCCC
</div>
<div class="service_scope" style="height:300px;background-color:black;float:left;">
DDDDDDDDD
</div>
</div>
<ul id="p_ul" class="p_ul ">
<li class="p_ul_li back">A</li>
<li class="p_ul_li">B</li>
<li class="p_ul_li">C</li>
<li class="p_ul_li">D</li>
</ul>
</div>
<script type="text/javascript">
//獲取當(dāng)前設(shè)備寬度
var body_width = document.body.clientWidth;//當(dāng)前設(shè)備寬度
var arr = document.getElementsByClassName("service_scope");//幻燈片數(shù)組
document.getElementById("content").style.width = body_width * arr.length;//幻燈片的父容器的寬度
var i;//全局計(jì)數(shù)器
var zhuangtai = false;//狀態(tài)判定，動(dòng)畫效果執(zhí)行的時(shí)候不能在疊加效果執(zhí)行，執(zhí)行完畢才能在執(zhí)行新的函數(shù)
var p_ul_li=0;//底部選擇器樣式的計(jì)數(shù)器
var t = 380;//動(dòng)畫效果執(zhí)行時(shí)間，0.38S
var jishi = 1;//計(jì)時(shí)器每次執(zhí)行時(shí)間
for(i = 0;i < arr.length; i++){
arr[i].style.width = body_width;//第一種子元素的寬度，用JS動(dòng)態(tài)取值賦值
}
$(function(){
$(".service_scope").swipeleft(function(){
//console.log(p_ul_li);
if($(this).index() >= 0 && $(this).index() < arr.length-1 && zhuangtai == false){
$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()){ //此處可以設(shè)定更多的值，只需要大于要顯示的元素個(gè)數(shù)即可。條件就是Int，left就是寬度*對(duì)應(yīng)的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;
}
}
</script>
</div>
<!--引用頁尾-->
<iframe src="footer.html" width="100%" height="50" frameborder="0">
</iframe>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果,通過css樣式控制結(jié)合jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)切換元素樣式實(shí)現(xiàn)提示框效果,非常美觀實(shí)用,需要的朋友可以參考下2015-09-09
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-06
商城常用滾動(dòng)的焦點(diǎn)圖效果代碼簡(jiǎn)單實(shí)用
此效果在網(wǎng)上使用的頻率比較多一點(diǎn)但大多是插件，要么JS寫的太過于復(fù)雜童鞋們看起來有一定的難度，這個(gè)相對(duì)來說比較簡(jiǎn)單一點(diǎn),感興趣的可以參考下哈2013-03-03
jQuery Easyui使用（二）之可折疊面板動(dòng)態(tài)加載無效果的解決方法
這篇文章主要介紹了jQuery Easyui使用之可折疊面板動(dòng)態(tài)加載無效果的解決方案，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門效果
這篇文章主要介紹了jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門效果,涉及jquery樣式變換的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
JQuery中使文本框獲得焦點(diǎn)的方法實(shí)例分析
這篇文章主要介紹了JQuery中使文本框獲得焦點(diǎn)的方法,實(shí)例分析了jQuery針對(duì)文本框獲得焦點(diǎn)的技巧,需要的朋友可以參考下2015-02-02
Jquery加載時(shí)從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList實(shí)例
從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList，option選項(xiàng)value動(dòng)態(tài)賦值，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
本文主要通過jQuery基礎(chǔ)知識(shí)、選擇要操作的元素及處理DOM元素3個(gè)方面給我們做了下小結(jié)，非常的詳盡，推薦給有需要的小伙伴。2014-12-12
本文給大家介紹如何給Carousel插件添加新的功能，非常方便以后的程序開發(fā)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04