jquery mobile を使用すると、以下で説明するスライドショー効果を簡単に実現できます。
1. 関連する jqury モバイル クラス ライブラリを導入します
<br><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <br><script src="http://code.jquery .com/jquery -1.7.1.min.js"></script> <br><script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1 .1.min .js"></script> <br><br> <br>
</div>2. スライドショーを再生する必要がある各ページの基本構造 <br> <strong></strong><br><div class="codetitle">
<span>コードをコピーします<a style="CURSOR: pointer" data="77683" class="copybut" id="copybut77683" onclick="doCopy('code77683')"><u></u> コードは次のとおりです:</a></span> </div><div data-role="page" id="slide1" data-テーマ="a" データ遷移="フェード"> <div class="codebody" id="code77683"><div data-role="header"> <br><h1>スライド 1</h1> <br><div data-role="content"> <br></div> <br><br> <br><br>3.各スライド間のコードは <br> です: </div>
<br><strong></strong><br>コードをコピー <div class="codetitle">
<span><a style="CURSOR: pointer" data="55656" class="copybut" id="copybut55656" onclick="doCopy('code55656')"> コードは次のとおりです: <u></u> </a>varchangeSlide = function(toSlide){ </span>if(toSlide.length) </div>$.mobile.changePage(toSlide, {transition: toSlide.jqmData('transition') } <div class="codebody" id="code55656"> }; <br>// ホームページに戻ります<br>var getHomeSlide = function(){ <br>return $(':jqmData(role=page):first'); <br>}; home <br>var goHome = function(){ <br>changeSlide( getHomeSlide() ); <br>return false; <br>}; 次のページに移動します<br>var getNextSlide = function( slide){ <br>return slide.next(' :jqmData(role=page)'); <br>}// 次のページに進みます<br>var goForward = function(){ <br> changeSlide( getNextSlide($.mobile.activePage) ); <br>return <br>} <br>//前のページを取得します<br>var getPrevSlide = function(slide){ <br>return slide.prev (':jqmData(role=page)'); <br>} <br>// 前のページにジャンプします<br>var goBack = function(){ <br>changeSlide( getPrevSlide($.mobile.activePage) ); <br>return false; <br>}; <br><br> <br>ページジャンプを実現するために $.mobile.changePage メソッドが使用され、ジャンプには <br> ジャンプ効果パラメータがあることに注意してください。例: <br>//スライドアップ トランジションで「about us」ページに遷移します <br>$.mobile.changePage( "about/us.html", {transition: "slideup"} ); ID が「search」のフォームからのデータを使用して、「検索結果」ページに遷移します。 <br>$.mobile.changePage( "searchresults.php", { <br>type: "post", </div> data: $("form#search" ).serialize() <br>}); <br>$(':jqmData(role=page):first'); の代わりに、jqmData は実際に <br>jquery のデータ セレクターを置き換えます。 。 <br><br>4. もう 1 つは、<br> のような左右の矢印キーの処理です: <br><br><br><br><br>コードをコピー<br><strong></strong> コードは次のとおりです:<br><div class="codetitle"> <span>$(document).keydown(function(e) { <a style="CURSOR: pointer" data="95177" class="copybut" id="copybut95177" onclick="doCopy('code95177')">if(e.keyCode ==39) goForward(); //right <u> else if(e.keyCode ==37) goBack(); //left </u>}) </a>.bind("swiperight", goForward ) </span>.bind("swipeleft", goBack ); > </div> <div class="codebody" id="code95177">
<br>5. ナビゲーションバーの処理 <br> <br>各スライドが読み込まれると、ページのフッター部分にナビゲーションバーが自動的に読み込まれます。<br>これは前に読み込まれる必要があります。 'pagebeforecreate' , <br><br><br>
</div>
<br>コードをコピー<strong></strong><br> コードは次のとおりです:<br><div class="codebody" id="code76615"> <br>$(':jqmData(role=page)').live( 'pagebeforecreate',function(event){ <br>var slide = $(this); <br>// Find footer <br>var footer = $(":jqmData(role=footer)", slide ); <br>if( !footer.length ) { <br>//Add to the bottom of the page<br>footer = $('<div data-role="footer" data-position="fixed" data-fullscreen="true"/>').appendTo(slide); <br>}; <br>// add nav. bar <br>footer .html('<div data-role="navbar">' <br>'[list]' <br>'[*]<a data-icon="back"></a> <br>' <br>'[*]<a data-icon="home"></a> <br>' <br>'[*]<a data-icon="forward"> </a> <br>' <br>'[/list]' <br>'</div>'); <br>// Process the click button of the previous and next pages<br>var backButton = $ (':jqmData(icon=back)', footer).click( goBack ); <br>var homeButton = $(':jqmData(icon=home)', footer).click( goHome ); <br>var forwardButton = $(':jqmData(icon=forward)', footer).click( goForward ); <br>// Get before, after, homepage<br>var prevSlide = getPrevSlide( slide ), homeSlide = getHomeSlide(), nextSlide = getNextSlide( slide ) ; <br>// Whether the previous page exists, if so, set the clickable style <br>if( prevSlide.length ) { <br>backButton.attr('href', '#' prevSlide. attr('id') ); <br>homeButton.attr('href', '#' homeSlide.attr('id') ) <br>}else{ <br>//Disable its button<br>backButton. addClass('ui-disabled'); <br>homeButton.addClass('ui-disabled') <br>}; <br>// Whether the next page exists <br>if( nextSlide.length ) { <br> forwardButton.attr('href', '#' nextSlide.attr('id') ) <br>}else{ <br>// Disable its button <br>forwardButton.addClass('ui-disabled') <br> }; <br>//......<br>}); <br>
</div> <br><strong>6. Load pictures according to the situation </strong> <br>If there are many slides If so, you should not load all images, but load small images first, and you can determine which image to use based on the screen size, for example: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="58861" class="copybut" id="copybut58861" onclick="doCopy('code58861')"><u>Copy code </u></a> </span> The code is as follows: </div>
<div class="codebody" id="code58861"> <br><img src="empty.gif" class="photo" <BR>data-small="..." <BR>data-large=" ..."/> <br>
</div> <br><strong>Determine how to use </strong>: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="85564" class="copybut" id="copybut85564" onclick="doCopy('code85564')"><u>Copy code</u></a></span> The code is as follows: </div>
<div class="codebody" id="code85564"> <br>var loadImages = function(slide) { <br>var width = $(window).width(); <br>//Judge the image size according to the screen size<br>var attrName = width > 480? 'large' : 'small'; <br>$('img:jqmData(' attrName ')', slide).each(function(){ <br>var img = $ (this); <br>var source = img.jqmData(attrName); <br>if(source) img.attr('src', source).jqmRemoveData(attrName); <br>}); <br>} ; <br>
</div> <br>See the entire operation effect: <br>http://moretechtips.googlecode.com/svn/mobile-presentation/index.htm</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="JavaScript 画像処理 - 画像の形態学 (膨張と収縮)_JavaScript スキル" href="http://m.php.cn/ja/faq/18155.html">JavaScript 画像処理 - 画像の形態学 (膨張と収縮)_JavaScript スキル</a></span><span>次の記事：<a class="dBlack" title="JavaScript 画像処理 - 画像の形態学 (膨張と収縮)_JavaScript スキル" href="http://m.php.cn/ja/faq/18157.html">JavaScript 画像処理 - 画像の形態学 (膨張と収縮)_JavaScript スキル</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
