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 相关文章推荐
JS中style属性
Oct 11 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
javascript数字时钟示例分享
2014/04/23 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
python requests爬取高德地图数据的实例
2018/11/10 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python对列表的操作知识点详解
2019/08/20 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python中字符串的编码与解码详析
2020/12/03 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
车间班组长的职责
2013/12/13 职场文书
竞选班长演讲稿
2013/12/30 职场文书
事业单位辞职信范文
2014/01/19 职场文书
运动会稿件300字
2014/02/14 职场文书
道德模范先进事迹
2014/02/14 职场文书
植树节活动总结
2014/04/30 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
2014年导购员工作总结
2014/11/18 职场文书
小学生思想品德评语
2014/12/31 职场文书
2015年教师节慰问信
2015/03/23 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python