菜单

mobile做幻灯播放效果实现步骤,用innerhtml提高页面打开速度的方法

2019年8月2日 - 前端排行

 查看源代码,可以发现,页首的登陆代码位置,只有一行

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

复制代码 代码如下:

复制代码 代码如下:

<div id=”headtop”></div>

<!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=””
/>
<script
src=”;
<script
src=”;

  而flash幻灯的位置,也只有一行

2、每个需要播放幻灯片的页面基本结构

复制代码 代码如下:

复制代码 代码如下:

<div id=”index_slide”></div>

<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>

  对于这种需要耗时的代码,最好是放在页面最后面加载,然后用innerhtml的方法加载到对应位置,达到加快页面打开速度的目的。

3、接下来是每个幻灯片之间的来回导航了,代码为

复制代码 代码如下:

复制代码 代码如下:

$(“#headtop”).html($(“#headtop2”).html());
$(“#index_slide”).html($(“#index_slide2”).html());

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 );

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图