首页 > 代码库 > 大图轮播-带有图标标记
大图轮播-带有图标标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #datu { width:800px; height:500px; position:relative; margin:20px auto; border:2px solid red; overflow:hidden;} #ta { position:relative; left:0px; top:0px; transition:0.7s;} #suo { width:520px; height:70px; position:relative; margin:20px auto; border:2px solid blue; line-height:70px;} .suo { width:90px; height:50px; position:relative; border:1px solid yellow; float:left; margin-left:10px; margin-top:10px;} </style> </head> <body> <div id="datu" onm ouseover="Zhi()" onm ouseout="Li()" > <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td><img src="images/1.jpg" width="800" /></td> <td><img src="images/2.jpg" width="800" /></td> <td><img src="images/3.jpg" width="800" /></td> <td><img src="images/4.jpg" width="800" /></td> <td><img src="images/5.jpg" width="800" /></td> </tr> </table> </div> <div id="suo" onm ouseover="Zhi()" onm ouseout="Li()"> <div class="suo" biao="1"><img src="images/1.jpg" width="90" height="50" /></div> <div class="suo" biao="2"><img src="images/2.jpg" width="90" height="50" /></div> <div class="suo" biao="3"><img src="images/3.jpg" width="90" height="50" /></div> <div class="suo" biao="4"><img src="images/4.jpg" width="90" height="50" /></div> <div class="suo" biao="5"><img src="images/5.jpg" width="90" height="50" /></div> </div> </body> </html> <script> document.getElementById("ta").style.left="0px"; document.getElementsByClassName("suo").item(0).style.borderColor="red"; var biaosuo=1; var suo=document.getElementsByClassName("suo"); for(var i=0;i<suo.length;i++) { suo.item(i).onclick=function(){ var biao = this.getAttribute("biao"); for(var i = 0;i<5;i++) { if(i==biao-1) { document.getElementsByClassName("suo").item(i).style.borderColor="red"; } else { document.getElementsByClassName("suo").item(i).style.borderColor="yellow"; } if(biao==1) { document.getElementById("ta").style.left="0px"; } else if(biao==2) { document.getElementById("ta").style.left="-800px"; } else if(biao==3) { document.getElementById("ta").style.left="-1600px"; } else if(biao==4) { document.getElementById("ta").style.left="-2400px"; } else { document.getElementById("ta").style.left="-3200px"; } } } } function Change() { var ta = parseInt(document.getElementById("ta").style.left); if(ta>-3200) { document.getElementById("ta").style.left=(ta-800)+"px"; ta=ta-800; if(ta==-800) { biaosuo=2; } else if(ta==-1600) { biaosuo=3; } else if(ta==-2400) { biaosuo=4; } else if(ta=-3200) { biaosuo=5; } } else { document.getElementById("ta").style.left="0px"; biaosuo=1; } for(var i = 0;i<5;i++) { if(i==biaosuo-1) { document.getElementsByClassName("suo").item(i).style.borderColor="red"; } else { document.getElementsByClassName("suo").item(i).style.borderColor="yellow"; } } shi=window.setTimeout("Change()",3000); } var shi =window.setTimeout("Change()",3000); function Zhi() { window.clearTimeout(shi); } function Li() { shi=window.setTimeout("Change()",1000); } </script>
大图轮播-带有图标标记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。