使用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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
网上抓的一个特效
May 11 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
Move.js入门
Feb 08 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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过滤XSS攻击的函数
2013/11/12 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
中职生求职信
2014/07/01 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server