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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
JS实现多功能计算器
Oct 28 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
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
php简单生成随机数的方法
2015/07/30 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
Python处理Excel文件实例代码
2017/06/20 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python机器人行走步数问题的解决
2018/01/29 Python
python实现汉诺塔算法
2021/03/01 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
乡镇平安建设汇报材料
2014/08/25 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
教导处教学工作总结
2015/08/12 职场文书
详解Python为什么不用设计模式
2021/06/24 Python