<style type="text/css">/*大图轮播*/*{margin:0px auto;padding:0px;}#wai{width:500px;height:350px; ???}.tu{width:500px;height:350px;display:none;}.k{width:60px;height:5px;float:left;background-color:#FC0; ????这里用到了相对定位，如果在图片这个大div的下面插入一个四个框的margin-left:10px; ????div,默认的是在这个图片的下方，用top时是距离上面图片的距离，用position:relative; ????负值的话就移到图片里面去了。top:-30px;}#dian{width:300px;height:5px;}</style><body><div id="wai"> ???????<img ?class="tu" src="../../Pictures/壁纸.jpg" style="display:block;"/> ???????????????<img ??class="tu" src="../../Pictures/汉奸.jpg"/> ???????????????<img class="tu" src="../../Pictures/星空.jpg" /> ???????????????<img class="tu" src="../../Pictures/淄博.jpg"/> ???????</div> ???????<div id="dian"> ???????????<div class="k" style="background-color:#00F;" onclick="Dian(‘0‘)"></div> ???????????????????<div class="k" onclick="Dian(‘1‘)"></div> ???????????????????<div class="k" onclick="Dian(‘2‘)"></div> ???????????????????<div class="k" onclick="Dian(‘3‘)"></div> ???????????????????????</div>--></body><script type="text/javascript">var sy = 0; /* 定了一个索引值的变量*/window.setInterval("Lun()",3000); /*间隔是三秒出来一次图片*/function Lun() ?/*赋这个函数，是让图片来轮播*/{ var tu = document.getElementsByClassName("tu");sy++; ?// sy加1if(sy>=tu.length) //当sy那个索引值大于等于图片的总长度时，图片轮回到第一张图片{ sy = 0;}//让图片循环显示，循环隐藏for( var i=0;i<tu.length;i++){ tu[i].style.display = "none";}tu[sy].style.display = "block";//框随着图片的轮播，变成蓝色。var k = document.getElementsByClassName("k");for( var j=0;j<k.length;j++){ k[j].style.backgroundColor = "#FC0";}k[sy].style.backgroundColor = "#00F";}//点哪个框，变蓝色，而且换成哪个图片function Dian(a){ sy = a; ????//a是形参，连着点击框，框里索引着图片var tu = document.getElementsByClassName("tu");for( var i=0;i<tu.length;i++){ tu[i].style.display = "none"; ??// 图片循环显示，循环隐藏}tu[a].style.display = "block";var k = document.getElementsByClassName("k"); ??//框里的颜色循环变颜色for( var j=0;j<k.length;j++){ k[j].style.backgroundColor = "#FC0";}k[a].style.backgroundColor = "#00F";}</script>大图轮播：
出现如下图所示的效果：
嵌了四张图，有四张图，图片自动轮播，播到第几个图片，第几个框变成了蓝色，点第几个框，变蓝色，显示第几张图片。
总结：思路是，1.插入四张图片的话，先建一个大div，里面直接嵌入图片，div定好宽与高，只让第一张图片显示，其他隐藏。
2.把四个图片看成一个数组，给一个索引值sy，定一个变量。
3.赋两个函数，一个是让它轮播，一个是让其点击框，变色，显示出哪个图片；
点击事件要定一个形参
下拉列表选择项：
要实现的效果：点击一项，出来下面几项，选择哪一项，哪一项跳到最上面的位置上。
<style type="text/css">#cai{width:100px;height:50px;border:1px solid #F00;text-align:center;vertical-align:middle;line-height:50px;}.m{width:100px;height:50px;border:1px solid #F00;text-align:center;vertical-align:middle;line-height:50px;border-top-width:0px; /*去重合线*/display:none;}</style><body> <div id="wai" style="width:100px; height:100px; margin-top:10px;" > ???????????????????????????<div id="cai" ?onclick="Xian()">淄博</div> ???????????????<div class="m" onclick="Xuan(this)">张店</div> ???????????????<div class="m" onclick="Xuan(this)">周村</div> ???????????????<div class="m" onclick="Xuan(this)">临淄</div> ???????????<!--在一个大的div嵌入四个小div，其中淄博是作为一个选择参考，要想实现的效果是这样的，点击淄博，出来下面的选项，点击张店，张店来到了淄博的位置。此时可以先添加一个淄博的点击事件，给其他的选项一个点击事件 ???????????，分为两个函数。下面的选项添加隐藏属性。Xuan里面的this是指的是本身，点击自己。--> ???????????????????????</div></body><script type="text/javascript">function Xian() ?/*给淄博的点击事件*/{ var m = document.getElementsByClassName("m"); ??//取出class名的值为m的，让其循环显示。for(var i=0;i<m.length;i++){ m[i].style.display = "block";}}function Xuan(a) ?????/*给下面的选项的点击事件，*/{ var cai = document.getElementById("cai");cai.innerHTML=a.innerHTML; ?????/*以前淄博位置的内容成为了选择项的内容。*/var m = document.getElementsByClassName("m"); ??/*这一步是让其选择完选项之后其他的选项隐藏*/for(var i=0;i<m.length;i++){ m[i].style.display = "none";}}</script>获取时间：
出现如下图所示的效果：
<style type="text/css">#time{width:400px; height:20px;}</style><body> <div ?id="time" > ?????????????????????????????????????</div> ???????????????????????????????????????????????????????????</body><script type="text/javascript">window.setInterval("Shi()",1); function Shi(){ var date = new Date();//注意这个地方new后面不要加 ?.var n = date.getFullYear();var y = date.getMonth()+1;var r = date.getDate();var x = date.getDay();var h = date.getHours();var f = date.getMinutes();var m = date.getSeconds();var str = "北京时间："+n+"年"+y+"月"+r+"日"+","+"星期"+x+","+h+":"+f+":"+m;document.getElementById("time").innerHTML = str;}</script> 总结：先建立一个新的变量date，获取时间，再利用字符串的拼接，要注意的是，注意所有的标点符号都是英文的。之后在div里
获取的内容与拼接的东西相等。
出现如下图中的效果：
<style type="text/css">.tou{width:50px;height:35px;float:left;text-align:center;vertical-align:middle;line-height:35px;}.xia{background-color:#F0F;}</style><body> <!--点哪个菜单，出哪个下拉菜单，然后不点的话就隐藏。--> ???????<div id="cai" style="width:100px; height:35px; background-color:#F00;"> ???????<div class="tou" onclick="Dian(‘0‘)">企业</div> ???????<div class="tou" onclick="Dian(‘1‘)">员工</div> ???????</div> ???????????????<div class="xia" style="width:100px; height:50px; text-align:left;"> ????????????<span>哈哈</span> ?????????????<span>哈罗</span> ?????????????<!--注意：如果说用<p>段落时，容易有空行，影响布局，尽量不要用。--> ????????????</div> ????????????<div class="xia " style="width:100px; height:50px; text-align:left; display:none;"> ????????????????<span>拜拜</span> ?????????????????<span>再见</span> ???????????????</div></body><script type="text/javascript">function Dian(a){ var xia = document.getElementsByClassName("xia");for ( var i=0;i<xia.length;i++){ xia[i].style.display = "none";}xia[a].style.display = "block";}</script>JS里的DOM在网页中的实际操作
原文地址：http://www.cnblogs.com/zuo72/p/7728428.html