JavaScript が画像ブロードキャストとカスケードメニューを実装する方法の例-jsチュートリアル-php.cn

JavaScript が画像ブロードキャストとカスケードメニューを実装する方法の例

黄舟

リリース： 2017-07-30 09:07:34

オリジナル

1179 人が閲覧しました

この記事では、JavaScript に基づいて画像ブロードキャストとカスケードメニューを実装するサンプルコードを主に紹介します。非常に優れており、必要な友人は参考にしてください。

JavaScript が画像ブロードキャストとカスケードメニューを実装する方法の例

<!DOCTYPE html>
<html>
 <head>
 <title>图片轮播</title>
 <style>
  p{
  border: 1px solid red;
  width:218px;
  height: 218px;
  }
  .show{
  display: inline-block;
  }
  .hide{
  display: none;
  }
 </style>
 <meta charset="UTF-8">
 </head>
 <body>
 <!-- onmouseover="" 鼠标悬停事件
  onmouseout="" 鼠标离开事件-->
 <p onmouseover="pause1();" onmouseout="lunbo();">
  <img  src="../images/01.jpg" class="show"/ alt="JavaScript が画像ブロードキャストとカスケード メニューを実装する方法の例" >
  <img  src="../images/02.jpg" class="hide"/ alt="JavaScript が画像ブロードキャストとカスケード メニューを実装する方法の例" >
  <img  src="../images/03.jpg" class="hide"/ alt="JavaScript が画像ブロードキャストとカスケード メニューを実装する方法の例" >
  <img  src="../images/04.jpg" class="hide"/ alt="JavaScript が画像ブロードキャストとカスケード メニューを実装する方法の例" >
  <img  src="../images/05.jpg" class="hide"/ alt="JavaScript が画像ブロードキャストとカスケード メニューを実装する方法の例" >
  <img  src="../images/06.jpg" class="hide"/ alt="JavaScript が画像ブロードキャストとカスケード メニューを実装する方法の例" >
 </p>
 <script>
  //轮播
  var id = null;
  var index = 0;
  function lunbo() {
   //轮播次数
   id = setInterval(function () {
    index++;
    //获取所有图片
    var imgs = document.getElementsByTagName("img");
    //将他们隐藏
    for (var i = 0; i < imgs.length; i++) {
     imgs[i].className = "hide";
    }
    //将下一张隐藏
    var next = index % imgs.length;
    imgs[next].className = "show";
   }, 2000);
  }
  function pause1() {
   clearInterval(id);
  }
  //在页面加载后自动轮播
  lunbo();
 </script>
 </body>
</html>

ログイン後にコピー

カスケードメニューの実装

すごい

概要

以上がJavaScript が画像ブロードキャストとカスケードメニューを実装する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。