jquery mobile移动端幻灯片滑动切换效果


Posted in Javascript onApril 15, 2020

自动适应设备的宽度,滑动会切换大图,底部导航跟随切换。点击底部导航切换大图。使用的jquery_mobile插件,引入1.4.5的插件,CSS表和jquery库即可,除了ID,CLASS命名可能会和你项目重复,改成单独即可,其他应该没有重复的,因为本脚本使用计时器写的,加入了方法判定,在执行一个方法的时候,锁定其他方法禁止执行,不会冲突,使用计时器来控制动画,可能不尽如人意,准备重构一下改成Jquery的animate()方法来执行动画效果。近期重构好在上传使用内置方法不用计时器的版本吧。

jquery mobile移动端幻灯片滑动切换效果

<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">
//获取当前设备宽度
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.length; i++){
arr[i].style.width = body_width;//第一种子元素的宽度,用JS动态取值赋值
}
$(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()){ //此处可以设定更多的值,只需要大于要显示的元素个数即可。条件就是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;
}
}
</script>
</div>

<!--引用页尾-->
<iframe src="footer.html" width="100%" height="50" frameborder="0"> 
</iframe>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 #Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 #Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 #Javascript
Angular2 PrimeNG分页模块学习
Jan 14 #Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python随机生成彩票号码的方法
2015/03/05 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python数据预处理方式 :数据降维
2020/02/24 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
党委班子剖析材料
2014/08/21 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
刑事法律意见书
2015/06/04 职场文书
Python 内置函数速查表一览
2021/06/02 Python
详解JAVA的控制语句
2021/11/11 Java/Android