使用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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
生成卡号php代码
2008/04/09 PHP
PHP之短标签开启设置
2013/06/17 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
Python实现一个简单的验证码程序
2017/11/03 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
通过Pandas读取大文件的实例
2018/06/07 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python 的AES加密与解密实现
2019/07/09 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
幼儿园教学工作总结2015
2015/05/12 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers