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:341134parcourir
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
<!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