JavaScript でのサブメニューとコントロールを使用したスライダーカルーセル効果の実装-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript でのサブメニューとコントロールを使用したスライダーカルーセル効果の実装

黄舟

Nov 01, 2017 am 09:49 AM

javascriptjs

無限にスクロールする写真 (写真カルーセル) のプロジェクトを行ったことがあるかもしれませんが、通常のスクロールを使用すると、最後の写真に到達すると、最初の写真に戻ることになります。これは非常に悪いユーザーエクスペリエンスです。この記事では、JavaScript に基づいたサブメニューとコントロールを備えたスライダーカルーセル効果について説明します。具体的な実装コードは次のとおりです。

実装効果:

実装原理:

/ / 手順
// 1. イベントソースと関連要素を取得します
// 2. 最初の画像が配置されている li をコピーし、ul の最後に追加します
// 3. li を ol (ul の番号) に追加しますは -1 で最初のボタンを点灯します
// 4. OL の li にマウスを置くと写真が切り替わります
// 5. タイマーを追加します
// 6. 写真を左右に切り替えます (マウスを置くと非表示になります)遠ざけて表示してください)

実装コード:

<!DOCTYPE html>
<html>
<head>
  <title>轮播图</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      margin: 100px auto;
      position: relative;
      box-shadow: 1px 1px 5px #2d2d2d;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current{
      background-color: #03c03c;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      left: 5px;
      top: 50%;
      position: absolute;
      margin-top: -20px;
      background-color: #000;
      cursor: pointer;
      line-height: 35px;
      text-align: center;
      font-weight: bold;
      font-family: "微软雅黑";
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #2d2d2d;
    }
    #arr #right{
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<p class="all" id="all">
  <p class="screen" id="screen">
    <ul id="ul">
      <li><img  src="/static/imghwm/default1.png"  data-src="./images/01.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript でのサブメニューとコントロールを使用したスライダー カルーセル効果の実装" ></li>
      <li><img  src="/static/imghwm/default1.png"  data-src="./images/02.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript でのサブメニューとコントロールを使用したスライダー カルーセル効果の実装" ></li>
      <li><img  src="/static/imghwm/default1.png"  data-src="./images/03.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript でのサブメニューとコントロールを使用したスライダー カルーセル効果の実装" ></li>
      <li><img  src="/static/imghwm/default1.png"  data-src="./images/04.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript でのサブメニューとコントロールを使用したスライダー カルーセル効果の実装" ></li>
      <li><img  src="/static/imghwm/default1.png"  data-src="./images/05.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript でのサブメニューとコントロールを使用したスライダー カルーセル効果の実装" ></li>
    </ul>
    <!-- 图片子菜单 -->
    <ol>
    </ol>
    <!-- 左右切换按钮 -->
    <p id="arr">
      <span id="left"><</span>
      <span id="right">></span>
    </p>
  </p>
</p>
<!-- script -->
<script type="text/javascript">
  // 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张
  // 步骤
  // 1. 获取事件源以及相关元素
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  // 4. 鼠标放到ol的li上切换图片
  // 5. 添加定时器
  // 6. 左右切换图片（鼠标放上去隐藏，移开显示）
  // 1. 获取事件源以及相关元素
  var all = document.getElementById("all");
  var screen = all.firstElementChild || all.firstChild;
  var imgWidth = screen.offsetWidth;
  var ul = screen.firstElementChild || screen.firstChild;
  var ol = screen.children[1];
  var p = screen.lastElementChild || screen.lastChild;
  var spanArr = p.children;
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  var ulNewLi = ul.children[0].cloneNode(true);
  ul.appendChild(ulNewLi);
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  for(var i=0; i<ul.children.length-1; i++){
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i+1;
    ol.appendChild(olNewLi);
  } 
  var olLiArr = ol.children;
  olLiArr[0].className = "current";
  // 4. 鼠标放到ol的li上切换图片
  for(var i=0; i<olLiArr.length; i++){
    // 自定义属性，把索引值绑定到元素的index属性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function(){
      // 排他思想
      for(var j=0; j<olLiArr.length; j++){
        olLiArr[j].className = "";
      }
      this.className = "current"
      // 鼠标放到小方块上时，索引值和key以及square同步
      // key = this.index;
      // square = this.index;
      key = square = this.index;
      // 移动盒子
      animate(ul, -this.index*imgWidth);
    }
  }
  // 5. 添加定时器
  var timer = setInterval(autoPlay, 1000);
  // 固定向右切换图片
  // 两个定时器（一个记录图片，一个记录子菜单栏）
  var key = 0;
  var square = 0;
  function autoPlay(){
    // 通过key的自增来模拟图片的索引值，然后移动ul
    key++;
    if(key > olLiArr.length){
      // 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张
      ul.style.left = 0;
      key = 1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮盒子
    // 排他思想做小方块
    square++;
    if(square > olLiArr.length-1){
      // 索引值不能大于5，如果大于5则立即变为0；
      square = 0;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  // 鼠标放上去清除定时器，移开启动定时器
  all.onmouseover = function(){
    p.style.display = "block";
    clearInterval(timer);
  }
  all.onmouseout = function(){
    p.style.display = "none";
    timer = setInterval(autoPlay,1000);
  }
  // 6. 左右切换图片（鼠标放上去显示，移开隐藏）
  spanArr[0].onclick = function(){
    // 通过控制key的自增来模拟图片的索引值，然后移动ul
    key--;
    if(key<0){
      // 先移到最后一张，然后key的值取前一张的索引值，然后向前移动
      ul.style.left = -imgWidth*(olLiArr.length) + "px";
      key = olLiArr.length-1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮小方块
    square--;
    if(square<0){
      // 索引值不能大于等于5，如果为5，立即变为0
      square = olLiArr.length-1;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  spanArr[1].onclick = function(){
    // 右侧的和定时器一模一样
    autoPlay();
  }
  // 动画封装
  var absSpeed = 10; //设定步长
  function animate(ele, target){
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    ele.timer = setInterval(function(){
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      if(Math.abs(val) < Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    }, 10)
  }
</script>
</body>
</html>

概要

以上がJavaScript でのサブメニューとコントロールを使用したスライダーカルーセル効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。