Steps to implement slide show effect using jquery mobile_jquery

Using jquery mobile, you can easily achieve the slideshow effect, which is explained below.
1. Introduce the relevant jqury mobile class library

Copy the code The code is as follows:

2. Basic structure of each page that needs to play a slideshow

Copy code The code is as follows:

Slide 1

3. Next is the navigation back and forth between each slide. , the code is :

Copy code The code is as follows:

var changeSlide = function( toSlide){
if(toSlide.length)
$.mobile.changePage( toSlide, { transition: toSlide.jqmData('transition') } );
};
// Return to homepage
var getHomeSlide = function(){
return $(':jqmData(role=page):first');
};
// go home
var goHome = function(){
changeSlide( getHomeSlide() );
return false;
};
// Go to the next page
var getNextSlide = function(slide){
return slide.next(' :jqmData(role=page)');
};
//Go to the next page
var goForward = function(){
changeSlide( getNextSlide($.mobile.activePage) );
return false;
};
//Get the previous page
var getPrevSlide = function(slide){
return slide.prev(':jqmData(role=page)');
};
// Jump to the previous page
var goBack = function(){
changeSlide( getPrevSlide($.mobile.activePage) );
return false;
};

Note that the $.mobile.changePage method is used to achieve page jump, and the jump has a
jump effect parameter, 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 with an id of "search"
$.mobile.changePage( "searchresults.php", {
type: "post",
data: $("form#search" ).serialize()
});
In return $(':jqmData(role=page):first');, jqmData actually replaces
jquery's data selector.
4. Another one is the processing of left and right arrow keys, such as :

Copy code The code is 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. Processing of navigation bar
When each slide is loaded, the navigation bar is automatically loaded into the footer part of the page.
This should be loaded before 'pagebeforecreate' ,

Copy code The code is as follows:

$(':jqmData(role=page)').live( 'pagebeforecreate',function(event){
var Slide = $(this);
// 바닥글 찾기
var footer = $(":jqmData(role=footer)", Slide );
if( !footer.length ) {
//페이지 하단에 추가
footer = $('

').appendTo(slide)
}// 탐색 표시줄 추가
footer .html('

'
'[list]'
'[*]
'
'[*]
'
'[*]
'
'[/list]'
'

');
// 이전 페이지와 다음 페이지의 클릭 버튼 처리
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( 슬라이드 ), homeSlide = getHomeSlide(), nextSlide = getNextSlide( 슬라이드 ) ;
// 이전 페이지가 존재하는지 여부, 존재한다면 클릭 가능한 스타일을 설정합니다.
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. 상황에 맞게 사진을 불러옵니다 슬라이드가 많은 경우, 모든 이미지를 로드해서는 안 되며, 작은 이미지를 먼저 로드해야 하며, 화면 크기에 따라 사용할 이미지를 결정할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

data- small="..."
data-large=" ..."/>

사용 방법 결정 :

코드 복사 코드는 다음과 같습니다.

var loadImages = function(slide) {
var width = $(window ).width();//화면 크기에 따라 이미지 크기를 판단합니다.
var attrName = width > 'large' : 'small'
$('img:jqmData(' attrName ')', 슬라이드).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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn