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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
js微信支付实现代码
Dec 22 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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网站在线人数统计
2008/04/09 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python圣诞树编写实例详解
2020/02/13 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
长安大学毕业生自我鉴定
2014/01/17 职场文书
企业宣传口号
2014/06/12 职场文书
财务管理专业自荐书
2014/09/02 职场文书
学习教师法的心得体会
2014/09/03 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技