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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
django Serializer序列化使用方法详解
2018/10/16 Python
django celery redis使用具体实践
2019/04/08 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Django中Middleware中的函数详解
2019/07/18 Python
wxpython绘制圆角窗体
2019/11/18 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
初中语文教学反思
2014/02/02 职场文书
党员自我对照检查材料
2014/08/19 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
元旦晚会开场白
2015/05/29 职场文书
校园运动会广播稿
2015/08/19 职场文书