隔行变色 ,移入变色
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(){ trs = document.getElementById('tab').getElementsByTagName('tr'); } /*各行变色*/ function ghbs(){ 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样式代码:
#lun{ width: 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; width: 20px; height: 40px; background-color: #ccc; cursor: pointer; } #you{ float: right; position:absolute; margin-top:126px; right: 0px; text-align: center; line-height: 40px; width: 20px; height: 40px; background-color: #ccc; cursor: pointer; } .tu{ border-radius: 50%; height: 10px; width: 10px; float:left; margin-left: 10px; cursor: pointer; } .tus{ height:15px; width: 100px; position: absolute; top: 213px; right:103px; } #im{ margin-top:50px; width: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;
}
console.log(n);
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); }
结果显示