jQueryのシンプルで実践的なカルーセル実装方法

この記事では主にjqueryを使った簡単で実用的なカルーセルの作成方法を詳しく紹介しますので、興味のある方はぜひ参考にしてください。

WEB 開発は、コンテナ内のアイテムがループで再生および表示され、同時に対応するナビゲーション バー プロンプトが存在する状況でよく使用されます。これは、多くの場所で使用でき、機能が非常に似ているためです。ので、このように書きました。再生機能を共有してください。これには、オンラインで検索してダウンロードできます。

1.以下を別のファイル itemPlayerApp.js として保存します:

//attend: this need jQuery.js support 
var itemPlayerApp={ 
 author:'shenzhenNBA', 
 version:'v1.0', 
 appMaxNum:0, 
 playData:'1xplay', 
 playerID:"", 
 speed:3000, 
 appPlay:function(){  
  var f=this.playData.toLowerCase().split('x'); 
  if(f[1]=='play'){ 
   var i; 
   try{i=parseInt(f[0]);}catch(e){i=0;} 
   if(i>=this.appMaxNum){i=0;}    
   this.appTab(i);   
   this.playData=(++i)+"xplay"; 
  }   
 }, 
 appTab:function(tabIndex){ 
  var k,j; 
  try{k=parseInt(tabIndex);}catch(e){k=0;}   
  for(j=0;j<this.appmaxnum><p>2. 使用方法: <br></p>
<p>1. 使用する Web ページに jQery ファイルとこの itemPlayerApp.js ファイルを導入します。例: </p>
<p>&lt ;script language="javascript" src="xpath/itemPlayer.js" > <br></p>
<p>2. 以下の形式で HTML ファイルを作成します<br></p>
<pre class="brush:php;toolbar:false"><p>

</p><p>
<a>1</a>
<a>2</a>
<a>3</a>
</p>
<p>
<a><img  src="/static/imghwm/default1.png" data-src="img/pic0.jpg" class="lazy" alt="jQueryのシンプルで実践的なカルーセル実装方法" ></a>
<a><img  src="/static/imghwm/default1.png" data-src="img/pic1.jpg" class="lazy" alt="jQueryのシンプルで実践的なカルーセル実装方法" ></a>
<a><img  src="/static/imghwm/default1.png" data-src="img/pic2.jpg" class="lazy" alt="jQueryのシンプルで実践的なカルーセル実装方法" ></a>
</p>

注: できるだけ簡単なので、適切にフォーマットされた HTML を作成する必要があります。主な要件は次のとおりです。色の部分に注意してください。

//A、id =containerIDNavCon と id =containerIDItemCon の接続 A 要素の数は等しい必要があります。 /B、ナビゲーション コンテナの ID 構成は、上記のとおり、メイン コンテナ ID に NavCon を加えたものである必要があります。
//C、ナビゲーション コンテナ内の各要素 A 要素の ID は、itemNav と開始する増加する番号シーケンスで構成されます。上の緑色の部分に示すように 0 の場合、
//D、表示項目コンテナーの各 A 要素の ID は、itemNav と 0 で始まる増加する数値シーケンス (上の紫色の部分など) で構成されます。

3. WEB ページの読み込みイベント onload で、カルーセル関数を初期化して有効にします。例:

window.onload=function(){
itemPlayerApp.init('containerID' ,3000,300,200);
itemPlayerApp。 active();
}

3. 次の例

すべてのファイルがフォルダーに配置されている場合、

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
 
 
<meta> 
<title>TEST</title> 
<script></script> 
<script></script> 
<style> 
*{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
#playerBox{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
</style> 
 
 
<p> 
</p><p> 
<a>1</a> 
<a>2</a> 
<a>3</a> 
</p> 
<p> 
<a><img  src="/static/imghwm/default1.png" data-src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" class="lazy" alt="jQueryのシンプルで実践的なカルーセル実装方法" ></a> 
<a><img  src="/static/imghwm/default1.png" data-src="http://csdnimg.cn/www/images/csdnindex_logo.gif" class="lazy" alt="jQueryのシンプルで実践的なカルーセル実装方法" ></a> 
<a><img  src="/static/imghwm/default1.png" data-src="http://avatar.csdn.net/5/1/9/1_shenzhennba.jpg" class="lazy" alt="jQueryのシンプルで実践的なカルーセル実装方法" ></a> 
</p> 
 
<p> </p> 
<p>项目循环轮播功能</p> 
<script> 
window.onload=function(){ 
itemPlayerApp.init(&#39;playerBox&#39;,3000,300,200); 
itemPlayerApp.appActive(); 
} 
</script> 
 

ヒント: jQuery.js ファイルをオンラインでダウンロードしてください。

必要なときにだけ使用してください。

関連する推奨事項:

H5 を使用してカルーセルを実装するサンプル チュートリアル (タッチ スクリーン バージョン)

H5 を使用してタッチ スクリーン カルーセルを実装する方法を詳しく紹介します

ステップごとに説明しますjQyery はカルーセルを実装します

以上がjQueryのシンプルで実践的なカルーセル実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。