Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert-js-Tutorial-php.cn

Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert

黄舟

Freigeben： 2017-07-30 09:07:34

Original

1178 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung von Bildübertragungen und kaskadierenden Menüs auf Basis von JavaScript vorgestellt. Er ist sehr gut und hat Referenzwert.

Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert

<!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="Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert" >
  <img  src="../images/02.jpg" class="hide"/ alt="Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert" >
  <img  src="../images/03.jpg" class="hide"/ alt="Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert" >
  <img  src="../images/04.jpg" class="hide"/ alt="Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert" >
  <img  src="../images/05.jpg" class="hide"/ alt="Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert" >
  <img  src="../images/06.jpg" class="hide"/ alt="Beispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert" >
 </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>

Nach dem Login kopieren

Kaskadierende Menüimplementierung

<!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>

Nach dem Login kopieren

Zusammenfassung

Das obige ist der detaillierte Inhalt vonBeispiele dafür, wie JavaScript Bildübertragungen und kaskadierende Menüs implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!