js はどのようにして JD カルーセル効果を実現しますか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js はどのようにして JD カルーセル効果を実現しますか?

零下一度

Jul 02, 2017 am 10:22 AM

javascript 京東効果

この記事では主に JS カルーセル効果について詳しく紹介します。興味のある方は参考にしてください。

この記事の例では、JS コードでの JD カルーセル効果の具体的な実装について説明します。参考、具体的な内容は以下の通りです

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body,ul,li{padding:0;margin:0;}
    li{list-style-type:none;}
    .wrap{
      position:relative;
      width:480px;
      height:260px;
      margin:100px auto;
    }
    .wrap>ul>li{position:absolute;display:none;}
    /*隐藏所有的li*/
    .wrap img{width:480px;height:260px;}
    .wrap li:first-child{display:block;}/*显示第一个*/
    .arrow{
      width:480px;
      height:60px;
      position:absolute;
      top:50%;
      margin-top:-30px;
      display:none;
    }
    .arrow>span{
      font-size:24pt;
      line-height:60px;
      display:inline-block;
      width:36px;
      background-color:#CEE5E8;
      text-align:center;
      cursor:pointer;
      opacity:0.5;
      border-radius:5px;/*显示圆框*/
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      color:black;
    }
    .wrap:hover .arrow{
      display:block;
    }
    .arrow>span:last-child{
      float:right;
    }
  </style>
</head>
<body>
<p class="wrap">
  <!--图片部分-->
  <ul>
    <li>
      <a href="javascript:void(0)">
        <img src="images/1.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/2.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/3.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/4.jpg"/>
      </a>
    </li>
  </ul>
  <!--按钮部分-->
  <p class="arrow">
    <span><</span>
    <span>></span>
  </p>
</p>
</body>
<script src="jquery-1.12.0.min.js"></script>
<script>
  $(function(){
    var count = 0;
    function change() {
      count++;
      if( count == $(".wrap>ul>li").length){
        count = 0;
      }
      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
    }
    var myTimer = setInterval(change,4000);
    function reRun(){
      myTimer = setInterval(change,4000);
    }
    /*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/
    $(".arrow>span").eq(0).click(function(){
      clearInterval(myTimer);
      /*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/
      count--;
      if( count == -1){
        count = $(".wrap>ul>li").length - 1;
      }      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
      setTimeout(reRun,0);
      /*重新启动计时器，保证不点击按钮是能正常切换*/
    });
    $(".arrow>span").eq(1).click(function(){
      clearInterval(myTimer);
      count++;
      if( count == $(".wrap>ul>li").length){
        count = 0;
      }    $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
      setTimeout(reRun,0);
    });
  });
</script>
</html>

ログイン後にコピー

以上がjs はどのようにして JD カルーセル効果を実現しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7414

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマートウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました

JD.comは「ドアツードアの無料返品交換」貨物保険サービスをさらにアップグレードし、8月末までに本格的に開始する予定です Aug 14, 2024 am 10:09 AM

本ウェブサイトは8月13日、消費者のショッピング体験を向上させ、加盟店により便利で効率的なアフターサービス注文管理ツールを提供するため、京東が4月に「宅配無料返品・交換」サービスを開始したと報じた。今年。当サイト上の注意：「宅配無料返品交換」サービスとは、加盟店が「運送保険（バージョンアップ版）」に加入した上で「宅配無料返品交換」サービスを開始することをいいます。 , 消費者がフロントデスクに「宅配無料返品交換」のロゴを表示して商品の返品または交換を開始すると、保険会社は商品の片道送料に対して保険サービスを提供します。返品と交換。運送保険（売主の運送保険および買主の運送保険を含む）が満たされている場合、配達担当者は荷物の引き取り時に顧客に運賃を請求せず、また、販売者が荷物の引き取り後に運賃を請求することもありません。代わりに保険会社が行います。北京配達に直接補償金を支払います。詳細ページには、送料が 0 であることが表示されます。今

九州風神アサシン4Sラジエターレビュー空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

ASSASSINといえば、プレイヤーの皆さんは必ず『アサシンクリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンスブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Mar 28, 2024 pm 03:20 PM

コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナレベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。

Colorful Hidden Star P15 24 レビュー：見た目も性能も兼ね備えたハードコアなオールラウンドゲーミングノートPC Mar 06, 2024 pm 04:40 PM

現在の急速な技術発展の時代において、ラップトップは人々の日常生活や仕事に欠かせない重要なツールとなっています。高いパフォーマンス要件を持つプレーヤーにとって、強力な構成と優れたパフォーマンスを備えたラップトップは、彼らのハードコアなニーズを満たすことができます。 Colorful Hidden Star P15 ノートブックコンピューターは、その優れたパフォーマンスと見事なデザインにより、将来のリーダーとなり、ハードコアノートブックのモデルと呼ぶことができます。 Colorful Hidden Star P1524 は、第 13 世代インテル Core i7 プロセッサーと RTX4060Laptop GPU を搭載し、よりファッショナブルな宇宙船デザインスタイルを採用し、細部まで優れたパフォーマンスを発揮します。まずはこの手帳の特徴を見ていきましょう。 Supreme は Intel Core i7-13620H 処理を搭載

4K HD映像がわかりやすい！この大規模なマルチモーダルモデルは、Web ポスターのコンテンツを自動的に分析するため、作業者にとって非常に便利です。 Apr 23, 2024 am 08:04 AM

PDF、Web ページ、ポスター、Excel グラフの内容を自動的に分析できる大型モデルは、アルバイトにとってはあまり便利ではありません。上海 AILab、香港中文大学、その他の研究機関が提案した InternLM-XComposer2-4KHD (略称 IXC2-4KHD) モデルは、これを実現します。解像度制限が 1500x1500 以下である他のマルチモーダル大型モデルと比較して、この作業ではマルチモーダル大型モデルの最大入力画像が 4K (3840x1600) 解像度を超え、任意のアスペクト比と 336 ピクセルをサポートし、 4K 動的解像度の変更。発売から3日後、このモデルはHuggingFaceのビジュアル質疑応答モデルの人気ランキングで1位となった。扱いやすい

「JD.com」でエクスプレス物流を確認する方法 Mar 11, 2024 pm 01:52 PM

京東エクスプレス物流は有名な速達会社であり、ユーザーが注文の物流状況を簡単に確認できるように、京東はさまざまなクエリ方法を提供しています。以下では、パッケージの最新の開発状況を簡単に追跡できるようにする、一般的に使用されるクエリメソッドをいくつか紹介します。 JD Express Logisticsの確認方法: Webサイト[https://www.jdl.com/orderSearch/?waybillCodes=]にアクセスして詳細を照会します: 方法1 [Webサイト照会] 1. Webサイト[https://www.jdl.com/orderSearch/?waybillCodes=]を開きます。 jdl.com/orderSearch/?waybillCodes=]。 2. ボックスに物流注文番号を入力し、[今すぐ確認]をクリックします。 3. 送り状番号と物流情報が下に表示されます。方法 2

See all articles

js はどのようにして JD カルーセル効果を実現しますか?

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック