返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2020-05-22 17:13:46易采站长站整理

使用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) {

相关文章 大家在看