jQuery は、コンテンツタイミング切り替えの完全な例を実装します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery は、コンテンツタイミング切り替えの完全な例を実装します。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

jquery

この記事の例では、スケジュールされたコンテンツ切り替え効果の jQuery の実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>左右切换内容 </title>
<script type="text/javascript">
</script>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
#change{ position:relative; top :20px;left:60px }
/* Hot_ranks style */
#hot_ranks { position:relative; width:190px; overflow:hidden; margin:50px; border:1px solid #E0E0E0; background:#F6F8F8; }
#hot_ranks h3 { padding:8px 8px 6px 8px; font-size:14px;}
#hot_ranks .hot_ranks_list { padding-bottom:6px; }
#hot_ranks .normal { display:none; }
#hot_ranks .current { display:block; }
#hot_ranks ul li { width:95%; height:21px; overflow:hidden; margin:0 auto; line-height:20px; }
#hot_ranks ul li em { padding:0 1px 0 3px; }
#ranks_change_bar { position:absolute; top:8px; right:2px; }
#ranks_change_bar a { display:block; float:left; width:27px; height:13px; overflow:hidden; margin:0 2px; background:url(arrow.gif) no-repeat; text-indent:-9999px; cursor:pointer;}
#ranks_change_bar #previous { background-position:0 0; }
#ranks_change_bar #next { background-position:-27px 0; }
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript">
  $(function(){
     abc();
  });
  function abc(){
     var $obj = $('#hot_ranks ul');
     var len = $obj.length;
     var i = 0;
     $("#next").click(function(){
       i++;
       if(i==len){
        i = 0;
       }
       $obj.stop(true,true).hide().eq(i).fadeIn(600);
       return false;
     });
     $("#previous").click(function(){
       i--;
       if(i==-1){
        i = len-1;
       }
       $obj.stop(true,true).hide().eq(i).fadeIn(600);
       return false;
     });
     //每2秒，自动切换。触发".next"的click事件
     var MyTime = setInterval(function(){
       $("#next").trigger("click");
     } , 4000);
  }
</script>
</head>
<body>
<div id="hot_ranks">
  <h3 id="站点价值排行">站点价值排行</h3>
  <ul class="current" style="display: block;">
    <li><em>1</em> <a href="#">首支北京奥运比赛用枪入境</a></li>
    <li><em>2</em> <a href="#">"最稳金牌"落选奥运阵容</a></li>
    <li><em>3</em> <a href="#">微软否认盖茨为看奥运租房</a></li>
    <li><em>4</em> <a href="#">金晶坐飞机被蛮横夫妇欺侮</a></li>
    <li><em>5</em> <a href="#">俄美女展示奥运服 奥运兵马俑亮相京城装</a></li>
    <li><em>6</em> <a href="#">五部奥运题材电影出炉 志愿者微笑迎奥运</a></li>
    <li><em>7</em> <a href="#">奥运志愿者不乏绝世佳丽 清纯奥运引导员</a></li>
    <li><em>8</em> <a href="#">奥运饭店正式运行 国际奥委会各部门入驻</a></li>
  </ul>
  <ul class="normal" style="display: none; ">
    <li><em>9</em> <a href="#">奥运会中国最稳的十个冠军</a></li>
    <li><em>10</em> <a href="#">女大学生怎么成了悲惨"卡奴"</a></li>
    <li><em>11</em> <a href="#">80岁老母竟被儿女逼得有家难回</a></li>
    <li><em>12</em> <a href="#">日本街头清新美女如此混搭(图)</a></li>
    <li><em>13</em> <a href="#">视频：人眼永远看不到的真相！</a></li>
    <li><em>14</em> <a href="#">87版红楼梦那些难忘笑靥(组图)</a></li>
    <li><em>15</em> <a href="#">美女股神：散户就是被宠坏的人</a></li>
    <li><em>16</em> <a href="#">我的80后老婆从绵羊变成大灰狼</a></li>
  </ul>
  <ul class="normal" style="display: none; ">
    <li><em>17</em> <a href="#">马自达6轿跑全系让利2万元 新威驰全系优惠8000</a></li>
    <li><em>18</em> <a href="#">"[降价]致胜全系让2.8万元 海马3现车优惠1万元</a></li>
    <li><em>19</em> <a href="#">桑塔纳志俊优惠3000元 林荫大道优惠3万提销量</a></li>
    <li><em>20</em> <a href="#">金晶坐飞机被蛮横夫妇欺侮</a></li>
    <li><em>21</em> <a href="#">俄美女展示奥运服 奥运兵马俑亮相京城装</a></li>
    <li><em>22</em> <a href="#"> [闲聊]路拍亚洲最长悍马 强人用遥控车画大黄蜂</a></li>
    <li><em>23</em> <a href="#">奥运志愿者不乏绝世佳丽 清纯奥运引导员</a></li>
    <li><em>24</em> <a href="#">大开眼界的路虎悬挂车展 "最有趣"车名排行榜</a></li>
  </ul>
  <p id="ranks_change_bar"><a href="#" id="previous">上一页</a><a href="#" id="next">下一页</a></p>
</div>
</body>
</html>

この記事が jQuery プログラミングのすべての人に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

クォーツでタスクが開始される前に通知を送信する方法は？Apr 04, 2025 pm 09:24 PM

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

JavaScriptでは、コンストラクターのプロトタイプチェーンで関数のパラメーターを取得する方法は？Apr 04, 2025 pm 09:21 PM

JavaScriptプログラミング、プロトタイプチェーンの関数パラメーターの理解と操作のJavaScriptのプロトタイプチェーンの関数のパラメーターを取得する方法は、一般的で重要なタスクです...

WeChat MiniプログラムWebViewでVUE.JSダイナミックスタイルの変位が失敗した理由は何ですか？Apr 04, 2025 pm 09:18 PM

WeChatアプレットWeb-ViewでVue.jsを使用する動的スタイルの変位障害がvue.jsを使用している理由の分析...

TamperMonkeyで複数のリンクの同時GETリクエストを実装し、順番に戻る結果を決定する方法は？Apr 04, 2025 pm 09:15 PM

複数のリンクの同時ゲットリクエストを作成し、結果を返すために順番に判断する方法は？ TamperMonkeyスクリプトでは、複数のチェーンを使用する必要があることがよくあります...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、