今天整理了一下两个js的实例，轮播和下拉弹窗。
1、轮播：
<body>
<div class="shenti11" onClick="xiangqian()" > （给对象shenti11添加点击事件xiangqian（））
</div>
<div class="shenti12">
<a href="#"><img src="img/lunbo1.jpg" class="shenti121" onMouseOver="stop()" onMouseOut="start()"></a> （给对象shenti12添加鼠标移动事件）
</div>
<div class="shenti13" onClick="xianghou()"></div> （给对象shenti11添加点击事件xianghou（））
</body>
<script>
var tupian=null; （设置变量）
var beijing=null;
var n=-10;
var lunbo=["img/lunbo1.jpg","img/lunbo2.jpg","img/lunbo3.jpg","img/lunbo4.jpg","img/lunbo5.jpg","img/lunbo6.jpg"]; （定义数组储存轮播图路径）
var bj=["#000000","#98CCCA","#FFD200","#EFEDE0","#5D120F","#EAEAEA"]; （定义数组储存轮播图背景颜色）
var setint=null; （定义变量定时器）
window.onload = function(){
tupian=document.getElementsByClassName("shenti121")[0]; （获取对象元素tupian）
beijing=document.getElementById("shenti1"); （获取对象元素beijing）
setint=setInterval(function(){ （设置定时器）
xianghou(); （调用方法xianghou（））
},2000);
}
function stop(){ （定义方法停止定时器）
clearInterval(setint);
}
function start(){ （定义方法开始定时器）
setint=setInterval(function(){
xianghou();
},2000);
}
function xianghou(){ （定义方法xianghou）
n++;
if(n > lunbo.length-1){ （判断如果n>最大下标，n=0回到第一张）
n=0;
}
if(n < 0){ （判断如果n<0,即第一次执行，跳到第二张）
n = 1;
}
var shenti13=document.getElementsByClassName("shenti13")[0];
tupian.setAttribute('src',lunbo[n]);
beijing.style.backgroundColor=bj[n];
}
function xiangqian(){ （定义方法xiangqian）
n--;
if(n < 0){
n = lunbo.length-1;
}
var shenti11=document.getElementsByClassName("shenti11")[0];
tupian.setAttribute('src',lunbo[n]);
beijing.style.backgroundColor=bj[n];
}
</script>
2、下拉弹窗；
</head>
<style type="text/css"> （设置样式）
body{
position: relative;
}
#inform{
position: absolute;
top: 20px;
160px;
max-height: 250px; （设置最大高度，当高度达到此值时出现滚动条）
z-index: 10;
background-color: #2B2B2B;
overflow: auto; （自动添加滚动条）
box-shadow:0px 0px 10px #000; （外阴影）
display: none; （默认隐藏）
}
#informTable{
table-layout:fixed; （用于实现表格td自动换行的部分代码）
325px;
}
.denglu1{
height: 30px;
}
.denglu11{
20px;
height: 20px;
background: url(img/denglutubiao.png) no-repeat 5px 3px;
float: left;
position: relative;
left: -30px;
}
.denglu12{
20px;
height: 20px;
background: url(img/denglutubiao.png) no-repeat -20px -20px;
float: left;
position: relative;
left: -25px;
}
.denglu13{
20px;
height: 20px;
background: url(img/denglutubiao.png) no-repeat -20px -40px;
float: left;
position: relative;
left: -25px;
}
.denglu14{
20px;
height: 20px;
background: url(img/denglutubiao.png) no-repeat 0px -20px;
float: left;
position: relative;
left: -25px;
}
.denglu15{
20px;
height: 20px;
background: url(img/denglutubiao.png) no-repeat 0px -40px;
float: left;
position: relative;
left: -25px;
}
.denglu111{
125px;
height: 40px;
position: relative;
left: -14px;
}
#inform a{
color: #CCCCCC;
font-size: 13px;
text-decoration: none;
}
#inform hr{
border:1px #232323;
160px;
margin-bottom: 0px;
}
#btn{
position: relative;
left:50px;
}
</style>
<script type="text/javascript">
function showInform(){ （显示悬浮层）
document.getElementById("inform").style.display='block'; （获取元素）
document.getElementById("inform").css("display","block");
}
function hiddenInform(event){ （隐藏悬浮层）
var informDiv = document.getElementById('inform');
var x=event.clientX;
var y=event.clientY;
var divx1 = informDiv.offsetLeft;
var divy1 = informDiv.offsetTop;
var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
document.getElementById('inform').style.display='none';
}
}
</script>
<body>
<a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()"> 登录 </a>
<div id="inform" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform(event)">
<dl>
<dt >
<a href="#"><dd class="denglu1"><div class="denglu11"></div><div class="denglu111">手机号登录</div>
</dd></a><hr>
</dt >
<dt>
<a href="#"><dd class="denglu1"><div class="denglu12"></div><div class="denglu111">微信登录</div>
</dd></a><hr>
</dt>
<dt>
<a href="#"><dd class="denglu1"><div class="denglu13"></div><div class="denglu111">QQ登录</div>
</dd></a><hr>
</dt>
<dt>
<a href="#"><dd class="denglu1"><div class="denglu14"></div><div class="denglu111">新浪微博登录</div>
</dd></a><hr>
</dt>
<dt>
<a href="#"><dd class="denglu1"><div class="denglu15"></div><div class="denglu111">网易邮箱账号登录</div>
</dd></a>
</dt>
</dl>
</body>
</html>