使用jquery mobile做幻灯播放效果实现步骤


Posted in Javascript onJanuary 04, 2013

使用jquery mobile,可以很容易实现幻灯播放效果,下面讲解下。
1、引入相关的jqury mobile类库

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title> jQuery Mobile Presentation</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

2、每个需要播放幻灯片的页面基本结构
<div data-role="page" id="slide1" data-theme="a" data-transition="fade"> 
<div data-role="header"> 
<h1>Slide 1</h1> 
</div> 
<div data-role="content"> 
</div> 
</div>

3、接下来是每个幻灯片之间的来回导航了,代码为
var changeSlide = function(toSlide){ 
if(toSlide.length) 
$.mobile.changePage( toSlide, { transition: toSlide.jqmData('transition') } ); 
}; 
// 返回主页 
var getHomeSlide = function(){ 
return $(':jqmData(role=page):first'); 
}; 
// go home 
var goHome = function(){ 
changeSlide( getHomeSlide() ); 
return false; 
}; 
// 到下一页 
var getNextSlide = function(slide){ 
return slide.next(':jqmData(role=page)'); 
}; 
//到下一页 
var goForward = function(){ 
changeSlide( getNextSlide($.mobile.activePage) ); 
return false; 
}; 
// 获得前一个页面 
var getPrevSlide = function(slide){ 
return slide.prev(':jqmData(role=page)'); 
}; 
// 跳到前一个页面 
var goBack = function(){ 
changeSlide( getPrevSlide($.mobile.activePage) ); 
return false; 
};

注意一下,使用了 $.mobile.changePage方法来实现页面的跳转,并且跳转是带有
跳转效果参数的,比如:
//transition to the "about us" page with a slideup transition
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
//transition to the "search results" page, using data from a form with an id of "search"
$.mobile.changePage( "searchresults.php", {
type: "post",
data: $("form#search").serialize()
});
而return $(':jqmData(role=page):first');中,实际上jqmData是代替了
jquery的data选择器了。
4、还有一个就是对左右箭头的就是键盘按键的处理了,比如
$(document).keydown(function(e) { 
if(e.keyCode ==39) goForward(); //right 
else if(e.keyCode ==37) goBack(); //left 
}) 
.bind("swiperight", goForward ) 
.bind("swipeleft", goBack );

5、对导航条的处理
当每个幻灯片加载时,导航条自动加载到页面的footer部分,
这个要在'pagebeforecreate前加载,
$(':jqmData(role=page)').live( 'pagebeforecreate',function(event){ 
var slide = $(this); 
// 找到footer 
var footer = $(":jqmData(role=footer)", slide ); 
if( !footer.length ) { 
//添加到页面底部 
footer = $('<div data-role="footer" data-position="fixed" data-fullscreen="true"/>').appendTo(slide); 
}; 
// add nav. bar 
footer.html('<div data-role="navbar">'+ 
'[list]'+ 
'[*]<a data-icon="back"></a> 
'+ 
'[*]<a data-icon="home"></a> 
'+ 
'[*]<a data-icon="forward"></a> 
' + 
'[/list]'+ 
'</div>'); 
// 处理前,后页的点击按钮 
var backButton = $(':jqmData(icon=back)', footer).click( goBack ); 
var homeButton = $(':jqmData(icon=home)', footer).click( goHome ); 
var forwardButton = $(':jqmData(icon=forward)', footer).click( goForward ); 
// 获得前,后,主页 
var prevSlide = getPrevSlide( slide ), homeSlide = getHomeSlide(), nextSlide = getNextSlide( slide ) ; 
// 是否存在前一页,存在的话设置可以点击的样式 
if( prevSlide.length ) { 
backButton.attr('href', '#'+ prevSlide.attr('id') ); 
homeButton.attr('href', '#'+ homeSlide.attr('id') ) 
}else{ 
//禁止其按钮 
backButton.addClass('ui-disabled'); 
homeButton.addClass('ui-disabled') 
}; 
// 是否存在后一页 
if( nextSlide.length ) { 
forwardButton.attr('href', '#'+ nextSlide.attr('id') ) 
}else{ 
// 禁止其按钮 
forwardButton.addClass('ui-disabled') 
}; 
//......... 
});

6、根据情况加载图片
如果幻灯片很多的话,不应该全部加载图片,应该先加载小的图片,并且可以根据屏幕大小判断用什么图片,比如:
<img src="empty.gif" class="photo" 
data-small="..." 
data-large="..."/>

判断使用方法
var loadImages = function(slide) { 
var width = $(window).width(); 
//根据屏幕大小判断使用图片大小 
var attrName = width > 480? 'large' : 'small'; 
$('img:jqmData('+attrName+')', slide).each(function(){ 
var img = $(this); 
var source = img.jqmData(attrName); 
if(source) img.attr('src', source).jqmRemoveData(attrName); 
}); 
};

整个运行效果见:
http://moretechtips.googlecode.com/svn/mobile-presentation/index.htm
Javascript 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 #Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 #Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 #Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 #Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 #Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 #Javascript
密码强度检测效果实现原理与代码
Jan 04 #Javascript
You might like
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python中unittest用法实例
2014/09/25 Python
Python实现KNN邻近算法
2021/01/28 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python字符串下标与切片及使用方法
2020/02/13 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
年度考核自我评价
2014/01/25 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
党员群众路线承诺书
2014/05/20 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis