基于JavaScript实现图片连播和联级菜单实例代码
图片轮播</title...</div>
<div class="content">
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="基于JavaScript实现图片连播和联级菜单实例代码" alt="基于JavaScript实现图片连播和联级菜单实例代码" style="font-size: medium; font-family: simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODI1MzMxNDA5LmpwZw=="></p>
<div class="jb51code">
<pre class="brush: javascript;">
<!doctype html>
<html>
<head>
<title>图片轮播</title>
<style>
div{
border: 1px solid red;
width:218px;
height: 218px;
}
.show{
display: inline-block;
}
.hide{
display: none;
}
</style>
<meta charset="utf-8">
</head>
<body>
<!-- onmouseover="" 鼠标悬停事件
onmouseout="" 鼠标离开事件-->
<div onmouseover="pause1();" onmouseout="lunbo();">
<img src="../images/01.jpg" class="show"/>
<img src="../images/02.jpg" class="hide"/>
<img src="../images/03.jpg" class="hide"/>
<img src="../images/04.jpg" class="hide"/>
<img src="../images/05.jpg" class="hide"/>
<img src="../images/06.jpg" class="hide"/>
</div>
<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></pre>
</div>
<p>联级菜单实现</p>
<div class="jb51code">
<pre class="brush: javascript;">
<!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></pre>
</div>
<p><span style="color: #ff0000"><strong>总结</strong></span></p>
<p>以上所述是小编给大家介绍的基于javascript实现图片连播和联级菜单实例代码，希望对大家有所帮助
</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1921162.html">
用JS实现简单的登录验证功能 </a>
</p>
<p>
下一篇： <a href="/article/1921164.html">
详解Vue2中组件间通信的解决全方案 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1921163.html" target="_blank" title="基于JavaScript实现图片连播和联级菜单实例代码">
<h2>
基于JavaScript实现图片连播和联级菜单实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1002826.html" target="_blank" title="关于JavaScript如何实现图片连播以及联级菜单的实例">
<h2>
关于JavaScript如何实现图片连播以及联级菜单的实例 </h2>
</a>
</li>
<li>
<a href="/article/990537.html" target="_blank" title="基于JavaScript实现图片连播和联级菜单实例代码">
<h2>
基于JavaScript实现图片连播和联级菜单实例代码 </h2>
</a>
</li>
<li>
<a href="/article/983746.html" target="_blank" title="关于JavaScript如何实现图片连播以及联级菜单的实例">
<h2>
关于JavaScript如何实现图片连播以及联级菜单的实例 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>