この記事の例は、参照のためのJSマルチピクチャの左右のスイッチング関数を共有しています。特定のコンテンツは次のとおりです
複製画像：
<html> <head> <Meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <title> </title> <link rel = "styleSheet" " href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <！ - ページ初期化CSSおよびページ共通ヘッダーCSS-> <スタイルタイプ= "テキスト/CSS"> @Charset "; html、body {background-color：＃f6f5f5; } .vg-body {width：1390px;マージン：0 Auto; } /*タスク成長値* / .vg_title {font-size：24px;ラインハイト：24px;パディング：20px 0;色：＃464646; } .vg_task {background-color：#fff;位置：相対; } .vg_task .ARROWBTN-LEFT、.VG_TASK .ARROWBTN-RIGHT {position：absolute;上：70px;幅：16px;高さ：20px;カーソル：ポインター; } .vg_task .ARROWBTN-left {左：40px;境界線：1px固体赤;背景：url（../ images/arrow-left.png）No-Reepeat; ; } .vg_task .ARROWBTN-right {right：40px;境界線：1px固体赤;背景：url（../画像/arrow-right.png）繰り返し。 ; } .vg_taskList {width：1200px;オーバーフロー：隠し;マージン：0 Auto; } .vg_tasklist ul {width：999％; } .vg_taskList li {width：258px;高さ：130px;フロート：左;ボーダー：1pxソリッド＃C8C8C8;マージン：15px 53px 15px 0;位置：相対; } .vg_tasklist li .task_hover {position：absolute;左：-1px;上：-1px;幅：212px;パディング：20px 25px 20px 23px;高さ：90px;国境圏：2pxソリッド＃e65a5a;オーバーフロー：隠し;バックグラウンドカラー：＃f0f0f0;表示：なし; } .vg_tasklist li：hover .task_hover {display：block; } .task_hover .task_desc {font-size：16px;ラインハイト：20px;色：＃646464; } .task_hover .task_limittimes {font-size：14px;色：＃787878;フロート：左;パディングトップ：12px; } .vg_tasklist li img {float：left;マージン：22px 8px 20px 20px; } .vg_taskList li .rightInfo {width：136px;フロート：左;テキストアライグ：センター; } .rightInfo H3 {font-size：16px;色：＃646464;パディングトップ：15px; } .rightInfo p {font-size：14px;ラインハイト：26px;色：＃787878; } .rightInfo a、.task_hover a {display：block;テキストアライグ：センター;幅：96px;高さ：30px; Line-Height：30px;境界線：2pxソリッド＃e65a5a;ボーダーラジウス：5px;フォントサイズ：16px; font-weight：700;色：＃e65a5a; } .task_hover a.done、.task_hover a.done：hover {background-color：＃b4b4b4;色：#fff;境界線：＃B4B4B4;カーソル：デフォルト; } .rightInfo a {マージン：12px auto 0; } .task_hover a {float：right;マージントップ：18px;マージン右：-4px; } .task_hover a：hover {text-decoration：none;バックグラウンドカラー：＃e65a5a;色：#fff; } /*grid-1230* / .grid-1230 .vg-body {width：1210px; } .grid-1230 .vg_tasklist {width：1090px; } .grid-1230 .vg_tasklist li {margin-right：16px; } .grid-1230 .vg_task .ARROWBTN-left {左：33px; } .grid-1230 .vg_task .ARROWBTN-right {右：33px; } .grid-1230 .vg_growth_table {padding：24px 30px; } .grid-1010 .vg-body {width：990px; } .grid-1010 .vg_tasklist {width：850px; } .grid-1010 .vg_tasklist li {magrim-right：35px; } .grid-1010 .vg_task .ARROWBTN-left {左：30px; } .grid-1010 .vg_task .ARROWBTN-right {右：30px; } .grid-1010 .vg_growth_table {padding：24px; } </style> <！ - スタイルcssの追加、特定のニーズに応じて名前を変更できます - > <スクリプトsrc = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> windows.onresize = function（）{var winwidth.bodywidth; if（winwidth <= 1230）{body.classname = "grid-1010"; } else if（winwidth <= 1410）{body.classname = "grid-1230"; } else if（winwidth> 1410）{body.classname = "grid-1410"; } else {alert（ "わからない！"）; }} </script> </head> <body id = "body"> <script> //ステータスディスプレイスタイルの判断を初期化し、ボディvar winwidth = document.body.clientwidthの後に配置します。 if（winwidth <= 1230）{body.classname = "grid-1010"; } else if（winwidth <= 1410）{body.classname = "grid-1230"; } else if（winwidth> 1410）{body.classname = "grid-1410"; } else {alert（ "わからない！"）; } </script> <div> <！ - タスク成長値の始まり - > <div> <p>タスク成長値</p> </div> <div> div> div> </div> <div> </div> <div> <ul id = "switkpic"> <li>ポイント</p> <a href = "javascript：;">完了> </a> </div> <div> <p> Open Annual Membership at One Anter Anmership（12ヶ月以上）</p> <p>毎月の制限</p> <p> </p> </p> <a href = "javascript：;"> complet src = "images/task_lianxubaoyue.png"> <div> <h3> open継続月次サブスクリプション</h3> <p>報酬成長値<span> 10 </p> <a href = "javascript：;"> complete> </a> </div> <p> <span> 1 </span> time </p> <a href = "javascript：;">完全に> </a> </div> </li> <li> <img src = "images/task_year.png"> <div> <h3> svip </h3> <p> span </point </p> point </p> href = "javascript：;">完全な> </a> </div> <div> <p>一度に年次メンバーシップを開く（12か月以上）</p> <p>毎月の制限</p> <p> href = "javascript：;"> complete> </a> </div div div div div div div div div div div div div> <p> <p> </fiv> <p> <p>毎月の制限<span> 1 </span> time </p> <a href = "javascript：;">完全な> </a> </div> </li> <li> <img src = "images/task_year.png"> <div> <h3> weChatの公式アカウントに従ってください</h3> <p> <p> <p> <p> <p> <a span> href = "javascript：;">完全な> </a> </div> <div> <p>一度に年次メンバーシップを開く（12か月以上）</p> <p>毎月の制限</p> <p> href = "javascript：;"> complete> </a> src = "images/task_year.png"> <div> <h3> task 5555555555 </h3> <p>報酬成長値<span> 10 </p> <a href = "javascript：;" <span> 1 </span> time </p> <a href = "javascript：;">完了するために> </a> </div> </li> <li> <img src = "images/task_year.png"> <div> task 6666666666666666666666666666666666666 </h3> href = "javascript：;">完了するために> </a> </div> <div> <p>一度に年次メンバーシップを開く（12か月以上）</p> <p>毎月の制限</p> <p> </p> </p> <a href = "javascript：;">完了する> </a> <div> <h3> task777777777 </h3> <p>報酬成長値<span> 10 </p> <a href = "javascript：;">完了するために> </a> </div> <div> <p>一度に年次メンバーシップを一度（12か月以上）</p> </p> </p> </p> </p> < href = "javascript：;">完了するために> </a> </div> <div> <p>一度に年次メンバーシップをオープンする（12か月以上）</p> <p>ムーンリミット</p> <p>時間</p> <a href = "javascript：;">完了する> </a> </div> </body> <script> //タスク成長var switchpic =（function（）{/*now：現在のリリナムの数：合計：lish_li：li width marginr_li：li right margin*/var = 1; var linum、shownum、offset、w_li、mignistr_li、pre、next; O.NextBTN; next。 if（ "＃body"） if（ "＃body"） if（ "＃body"）。 btnshow（）; next.on（ "click"、function（）{now ++; btnshow（）。 - （now -1） * windo）; resize（）; btnshow（）; switchpic.init（{prebtn：$（ "。arrowbtn-left"）、nextbtn：$（ "。arrowbtn-right"）、wrap：$（ "＃switchpic"）}）; </script> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。