隔行变色,移入变色和轮播
隔行变色 ,移入变色
html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!--隔行变色 移入变色--> < 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | var trs = [];//初始化< br >//页面加载完成 window.onload = function(){< br > //定义并赋值,把table底下的tr找出,定义成数组 trs = document.getElementById('tab').getElementsByTagName('tr'); } /*各行变色*/ function ghbs(){< br > //遍历隔行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){<br> //遍历每行,先全部变白 for(var i =0;i< trs.length ;++i){ trs[i].style.backgroundColor = "white"; }<br> //当鼠标移入变色 if(type != "out"){ obj.style.backgroundColor = "green"; } } |
轮播图:
html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!--轮播图--> < div id="lun" >< br > < img id="im" src="img/12.jpg" alt="" onMouseOver="stop()" onMouseOut="start()"> <!-- 翻页按钮 --> < br > < div id="zuo" onClick="shang()" onMouseOver="stop()" > < </ div > < div id="you" onClick="xia()" onMouseOver="stop()" > > </ div >< br > <!-- 轮播按钮--> < 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样式代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!-- 总的div --> < br > #lun{ width: 60%; height: 300px; position:relative; margin: 0 auto; background-color:aqua; }< br > <!-- 轮播上一页 --> #zuo{ float: left; position:absolute; margin-top:126px; text-align: center; line-height: 40px; width: 20px; height: 40px; background-color: #ccc; cursor: pointer; }< br > <!-- 轮播下一页 --> #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; }< br > <!-- 轮播按钮--> .tu{ border-radius: 50%; height: 10px; width: 10px; float:left; margin-left: 10px; cursor: pointer; }< br > <!-- 轮播按钮外面的父div--> .tus{ height:15px; width: 100px; position: absolute; top: 213px; right:103px; }< br > <!-- 轮播图片 --> #im{ margin-top:50px; width:100%; height:200px; float: left; } |
js代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | var imgDom = null;//获取图片变量初始化< br >//把图片定义成数组 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');//获取图片< br > //轮播图下面的按钮 bbtns = document.getElementsByClassName('tu'); IntervalObj = setInterval("lunBo()",3000);//定时器 }< br >//轮播方法 function lunBo(){ //从n=0开始 imgDom.src = imgPath[n];//获取图片< br > //遍历轮播按钮< br > for(var i =0;i< bbtns.length ;++i){<br> bbtns[i].style.backgroundColor = "#ccc";< br > }< br > //轮播和按钮同步< br > bbtns[n].style.backgroundColor = "red"; n++;//图片数组下标加一 //当加到最后一张时,返回第一张的下标 if(n >= imgPath.length){ n = 0; }< br > //当轮播到第一张时,返回最后一张的下标 if(n < 0 ){ n = imgPath.length-1; } } //当鼠标移到图片位置停止轮播 function stop(){<br> //清除定时器 clearInterval(IntervalObj); } //当鼠标从图片上yi移开,开始轮播 function start(){ IntervalObj = setInterval("lunBo()",3000); } //上一张 function shang(){ n--;< br > //点击到第一张时,下一张将返回到最后一张< br > if(n < 0 ){<br> n = imgPath.length-1;< br > }< br > imgDom.src = imgPath[n];< br > //遍历,轮播按钮和点击翻页同步< br > for(var i =0;i< bbtns.length ;++i){<br> bbtns[i].style.backgroundColor = "#ccc";< br > }< br > bbtns[n].style.backgroundColor = "red";< br > } //下一张 function xia(){< br >//当点击到最后一张图片时,将返回到第一张 if(n >= imgPath.length){< br > n = 0;< br > }< br > //轮播按钮与点击下一张同步< br > for(var i =0;i< bbtns.length ;++i){<br> bbtns[i].style.backgroundColor = "#ccc";< br > }< br > bbtns[n].style.backgroundColor = "red"; < br > imgDom.src = imgPath[n];< br > ++n; } //图片按钮 function tubtn(aaa){< br >//先清除定时器 clearInterval(IntervalObj);< br >//通过传值获取点击时对应图片 imgDom.src = imgPath[aaa]; n = aaa;< br >//调用轮播方法 lunBo();< br >//加载定时器 IntervalObj = setInterval("lunBo()",3000); } |
结果显示
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步