隔行变色 ，移入变色
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);
}
结果显示