JavaScript가 사진 방송 및 계단식 메뉴를 구현하는 방법의 예
- 黄舟원래의
- 2017-07-30 09:07:341177검색
이 글은 자바스크립트 기반으로 영상방송과 캐스케이딩 메뉴를 구현하는 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.
<!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>캐스케이딩 메뉴 구현<!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>
요약
위 내용은 JavaScript가 사진 방송 및 계단식 메뉴를 구현하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.