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中的闭包浅谈
Aug 23 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
javascript计时器详解
Feb 28 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
layui添加动态菜单与选项卡
Jul 26 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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
require.js的用法详解
2015/10/20 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
js+css实现全屏侧边栏
2020/06/16 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python内置函数及功能简介汇总
2020/10/13 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
给同事的道歉信
2014/01/11 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
党性教育心得体会
2014/09/03 职场文书
资料员岗位职责范本
2015/04/13 职场文书