隔行变色 ，移入变色
html代码：
<!--隔行变色 移入变色--> <button onClick="ghbs()">各行变色</button> <button onClick="yrbs()">移入变色</button> <table id="tab" width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table>
js代码：
var trs = [];//初始化
//页面加载完成 window.onload = function(){
//定义并赋值，把table底下的tr找出，定义成数组 trs = document.getElementById('tab').getElementsByTagName('tr'); } /*各行变色*/ function ghbs(){
//遍历隔行tr for(var i =0;i<trs.length;i+=2){ trs[i].style.backgroundColor = "red"; } } /*移入变色*/ function yrbs(){ //遍历每行 for(var i =0;i<trs.length;i++){ //设置鼠标移入移出事件 trs[i].setAttribute('onMouseOver','cl(this)'); trs[i].setAttribute('onMouseOut','cl(this,"out")'); } } //移入移出变色 function cl(obj,type){
//遍历每行，先全部变白 for(var i =0;i<trs.length;++i){ trs[i].style.backgroundColor = "white"; }
//当鼠标移入变色 if(type != "out"){ obj.style.backgroundColor = "green"; } }
轮播图：
html代码：
<!--轮播图--> <div id="lun" >
<img id="im" src="img/12.jpg" alt="" onMouseOver="stop()" onMouseOut="start()"> <!-- 翻页按钮 -->
<div id="zuo" onClick="shang()" onMouseOver="stop()" > < </div> <div id="you" onClick="xia()" onMouseOver="stop()" > > </div>
<!-- 轮播按钮--> <div class="tus"> <div class="tu" onClick="tubtn(0)" ></div> <div class="tu" onClick="tubtn(1)" ></div> <div class="tu" onClick="tubtn(2)" ></div> <div class="tu" onClick="tubtn(3)" ></div> </div> </div>
css样式代码：
<!-- 总的div -->
#lun{ 60%; height: 300px; position:relative; margin: 0 auto; background-color:aqua; }
<!-- 轮播上一页 --> #zuo{ float: left; position:absolute; margin-top:126px; text-align: center; line-height: 40px; 20px; height: 40px; background-color: #ccc; cursor: pointer; }
<!-- 轮播下一页 --> #you{ float: right; position:absolute; margin-top:126px; right: 0px; text-align: center; line-height: 40px; 20px; height: 40px; background-color: #ccc; cursor: pointer; }
<!-- 轮播按钮--> .tu{ border-radius: 50%; height: 10px; 10px; float:left; margin-left: 10px; cursor: pointer; }
<!-- 轮播按钮外面的父div--> .tus{ height:15px; 100px; position: absolute; top: 213px; right:103px; }
<!-- 轮播图片 --> #im{ margin-top:50px; 100%; height:200px; float: left; }
js代码：
var imgDom = null;//获取图片变量初始化
//把图片定义成数组 var imgPath = ['img/1.jpg','img/8.jpg','img/9.jpg','img/12.jpg']; var n = 0;//轮播图下标 var IntervalObj = null;//定时器对象 var bbtns = null;//轮播图下面的按钮变量初始化 //页面加载完成 window.onload = function(){ imgDom = document.getElementById('im');//获取图片
//轮播图下面的按钮 bbtns = document.getElementsByClassName('tu'); IntervalObj = setInterval("lunBo()",3000);//定时器 }
//轮播方法 function lunBo(){ //从n=0开始 imgDom.src = imgPath[n];//获取图片
//遍历轮播按钮
for(var i =0;i<bbtns.length;++i){
bbtns[i].style.backgroundColor = "#ccc";
}
//轮播和按钮同步
bbtns[n].style.backgroundColor = "red"; n++;//图片数组下标加一 //当加到最后一张时，返回第一张的下标 if(n >= imgPath.length){ n = 0; }
//当轮播到第一张时，返回最后一张的下标 if(n < 0){ n = imgPath.length-1; } } //当鼠标移到图片位置停止轮播 function stop(){
//清除定时器 clearInterval(IntervalObj); } //当鼠标从图片上yi移开，开始轮播 function start(){ IntervalObj = setInterval("lunBo()",3000); } //上一张 function shang(){ n--;
//点击到第一张时，下一张将返回到最后一张
if(n <0){
n = imgPath.length-1;
}
imgDom.src = imgPath[n];
//遍历，轮播按钮和点击翻页同步
for(var i =0;i<bbtns.length;++i){
bbtns[i].style.backgroundColor = "#ccc";
}
bbtns[n].style.backgroundColor = "red";
} //下一张 function xia(){
//当点击到最后一张图片时，将返回到第一张 if(n >= imgPath.length){
n = 0;
}
//轮播按钮与点击下一张同步
for(var i =0;i<bbtns.length;++i){
bbtns[i].style.backgroundColor = "#ccc";
}
bbtns[n].style.backgroundColor = "red";
imgDom.src = imgPath[n];
++n; } //图片按钮 function tubtn(aaa){
//先清除定时器 clearInterval(IntervalObj);
//通过传值获取点击时对应图片 imgDom.src = imgPath[aaa]; n = aaa;
//调用轮播方法 lunBo();
//加载定时器 IntervalObj = setInterval("lunBo()",3000); }
结果显示