With jquery mobile, you can easily achieve a slideshow, as explained below.
1, the introduction of the relevant Jqury Mobile class library
Copy Code code as follows:
<! DOCTYPE html>
<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, each need to play the slide of the basic structure of the page
Copy Code code as follows:
<div data-role= "page" id= "Slide1" Data-theme= "a" data-transition= "Fade" >
<div data-role= "Header" >
</div>
<div data-role= "Content" >
</div>
</div>
3, followed by each slide back and forth between the navigation, the code is：
Copy Code code as follows:
var changeslide = function (toslide) {
if (toslide.length)
$.mobile.changepage (Toslide, {transition:toSlide.jqmData (' transition ')});
};
Back to Home
var gethomeslide = function () {
Return $ (': Jqmdata (role=page): a ");
};
Go home
var gohome = function () {
Changeslide (Gethomeslide ());
return false;
};
To the next page
var getnextslide = function (slide) {
Return Slide.next (': Jqmdata (role=page) ');
};
To the next page
var goForward = function () {
Changeslide (Getnextslide ($.mobile.activepage));
return false;
};
Get a previous page
var getprevslide = function (slide) {
Return Slide.prev (': Jqmdata (role=page) ');
};
Skip to Previous page
var goBack = function () {
Changeslide (Getprevslide ($.mobile.activepage));
return false;
};
Note that the $.mobile.changepage method is used to achieve the page jump, and the jump is with
Jump effect parameters, such as:
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 and an ID of "search"
$.mobile.changepage ("searchresults.php", {
Type: "Post",
Data: $ ("Form#search"). Serialize ()
});
and return $ (': Jqmdata (role=page): a); in fact, Jqmdata is instead
The data selector for jquery.
4, there is a right and left arrow is the keyboard keys to deal with, such as：
Copy Code code as follows:
$ (document). KeyDown (function (e) {
if (E.keycode ==39) GoForward (); Right
else if (E.keycode ==37) goBack (); Left
})
. Bind ("Swiperight", GoForward)
. Bind ("Swipeleft", goBack);
5, to the Navigation bar processing
When each slide is loaded, the navigation bar is automatically loaded into the footer part of the page,
This is to be loaded before ' pagebeforecreate,
Copy Code code as follows:
$ (': Jqmdata (role=page) '). Live (' Pagebeforecreate ', function (event) {
var slide = $ (this);
Find Footer
var footer = $ (": Jqmdata (Role=footer)", slide);
if (!footer.length) {
Add to bottom of page
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> ');
Before processing, the click button on the Back page
var Backbutton = $ (': Jqmdata (icon=back) ', footer). Click (GoBack);
var Homebutton = $ (': Jqmdata (icon=home) ', footer). Click (gohome);
var Forwardbutton = $ (': Jqmdata (Icon=forward) ', footer). Click (GoForward);
Get before, after the homepage
var prevslide = getprevslide (slide), homeslide = Gethomeslide (), nextslide = getnextslide (slide);
If there is a previous page, there is a way to set the style that can be clicked
if (prevslide.length) {
Backbutton.attr (' href ', ' # ' + prevslide.attr (' id '));
Homebutton.attr (' href ', ' # ' + homeslide.attr (' id '))
}else{
Disable its buttons
Backbutton.addclass (' ui-disabled ');
Homebutton.addclass (' ui-disabled ')
};
Is there a later page
if (nextslide.length) {
Forwardbutton.attr (' href ', ' # ' + nextslide.attr (' id '))
}else{
Disable its buttons
Forwardbutton.addclass (' ui-disabled ')
};
//.........
});
6, according to the situation loading pictures
If a lot of slides, should not load all the pictures, should first load small pictures, and can be based on the size of the screen to judge what pictures, such as:
Copy Code code as follows:
Data-small= "..."
Data-large= "..."/>
judge how to use：
Copy Code code as follows:
var loadimages = function (slide) {
var width = $ (window). width ();
Use picture size to determine the size of the screen
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);
});
};
The whole operation effect see:
Http://moretechtips.googlecode.com/svn/mobile-presentation/index.htm
