Maison > Article > interface Web > Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade

Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade

黄舟original: 2017-07-30 09:07:341162parcourir

Cet article présente principalement l'exemple de code d'implémentation de la diffusion d'images et du menu en cascade basé sur JavaScript. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Exemples de la façon dont JavaScript implémente les diffusions dimages et les menus en cascade

<.>

<!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="Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade" >
  <img  src="../images/02.jpg" class="hide"/ alt="Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade" >
  <img  src="../images/03.jpg" class="hide"/ alt="Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade" >
  <img  src="../images/04.jpg" class="hide"/ alt="Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade" >
  <img  src="../images/05.jpg" class="hide"/ alt="Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade" >
  <img  src="../images/06.jpg" class="hide"/ alt="Exemples de la façon dont JavaScript implémente les diffusions d'images et les menus en cascade" >
 </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>

Mise en place du menu en cascade

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <script type="text/javascript" src="demo6.js">
</script> -->
<title>联动菜单</title>
</head>
<body>
 省：
 <select id="province" onchange="chg();">
  <option value="-1">请选择</option>
  <option value="0">河北省</option>
  <option value="1">山东省</option>
  <option value="2">山西省</option>
 </select>
 市：
 <select id="city">
  <option>请选择</option>
 </select>
 <script>
  // 模拟加载城市
 function loadCities() {
 return[
  ["石家庄","廊坊","保定"],
  ["济南","青岛","德州"],
  ["太原","大同","阳泉"]
 ];
 }
 var cities=loadCities();
 console.log(cities);
 function chg() {
  var sel1=document.getElementById("province");
  //获取省份
  var pindex=sel1.value;
  //获取该省份的城市
  var pcities=cities[pindex];
  console.log(pcities);
  //删除城市下拉列表中的所有城市
  var sel2=document.getElementById("city");
  var options=sel2.getElementsByTagName("option");
  console.log(options);
  for(var i=options.length-1;i;i--){
   sel2.removeChild(options[i]);
  }
  //在增加该省份城市
  if(pcities){
   for(var i=0;i<pcities.length;i++){
    var opn=document.createElement("option");
    opn.innerHTML=pcities[i];
    sel2.appendChild(opn);
   }
  }
 }
 </script>
</body>
</html>

Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Décrire brièvement les types d'opérateurs et les règles d'utilisation en JavaScriptArticle suivant：Décrire brièvement les types d'opérateurs et les règles d'utilisation en JavaScript

Articles Liés

Voir plus