大图轮播以及手风琴轮播特效的练习
1、轮播效果
每3秒换图，并且当鼠标悬停时停止，在点击箭头或者下方小图时换对应的图，并使小图的边框线变为红色
2、手风琴特效
此处使用ul无序列表，用js获取并操作每个li中div的宽度从而实现
<!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> * { margin:0px; padding:0px;} body { min-width:900px;} #datu { width:800px; height:500px; position:relative; margin:30px auto; overflow:hidden;} .datu { width:1200px; height:500px; position:relative; margin:30px auto; overflow:hidden;} #ta { margin-left:0px; transition:0.7s;} .lr { position:absolute; top:230px; width:32px; height:32px; z-index:99;} #left { left:10px; } #right { right:10px; } .suolue { height:60px; width:450px; position:relative; margin:auto; line-height:60px;} .suolue1 { height:50px; width:80px; float:left; border: 4px solid #666; background-size:contain; background-position:center;} .u1 { list-style-type:none;} .u1 li { float:left; margin-left:2px;} .u2 { list-style-type:none;} .u2 li { float:left;} .fengqin { height:500px; width:100px; background-repeat:no-repeat; background-position:center; transition:0.7s;} </style> </head> <body> <div id="datu" onmouseover="pause()" onmouseout="conti()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td width="800"><img src="Images/1.jpg" /></td> <td width="800"><img src="Images/2.jpg" /></td> <td width="800"><img src="Images/3.jpg" /></td> <td width="800"><img src="Images/4.jpg" /></td> <td width="800"><img src="Images/5.jpg" /></td> </tr> </table> <div class="lr" id="left" onclick="dong(-1)"> <img src="Images/left.png" /> </div> <div class="lr" id="right" onclick="dong(1)"> <img src="Images/right.png" /> </div> </div> <div class="suolue"> <ul class="u1"> <li><div class="suolue1" style="background-image:url(Images/1.jpg); border-color:red" id="tu1" onclick="xiaotu(1)"></div></li> <li><div class="suolue1" style="background-image:url(Images/2.jpg)" id="tu2" onclick="xiaotu(2)"></div></li> <li><div class="suolue1" style="background-image:url(Images/3.jpg)" id="tu3" onclick="xiaotu(3)"></div></li> <li><div class="suolue1" style="background-image:url(Images/4.jpg)" id="tu4" onclick="xiaotu(4)"></div></li> <li><div class="suolue1" style="background-image:url(Images/5.jpg)" id="tu5" onclick="xiaotu(5)"></div></li> </ul> </div> <div class="datu" onmouseover="stp()" onmouseout="goon()"> <ul class="u2"> <li><div class="fengqin" id="l1" onmouseover="fq(1)" style="width:800px; background-image:url(Images/1.jpg)"></div></li> <li><div class="fengqin" id="l2" onmouseover="fq(2)" style="background-image:url(Images/2.jpg)"></div></li> <li><div class="fengqin" id="l3" onmouseover="fq(3)" style="background-image:url(Images/3.jpg)"></div></li> <li><div class="fengqin" id="l4" onmouseover="fq(4)" style="background-image:url(Images/4.jpg)"></div></li> <li><div class="fengqin" id="l5" onmouseover="fq(5)" style="background-image:url(Images/5.jpg)"></div></li> </ul> </div> </body> </html> <script> document.getElementById("ta").style.marginLeft="0px"; var biao=1; function huan() { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(a<=-3200) { tu.style.marginLeft="0px"; } else { tu.style.marginLeft= (a-800)+"px"; } document.getElementById("tu1").style.borderColor="#666"; document.getElementById("tu2").style.borderColor="#666"; document.getElementById("tu3").style.borderColor="#666"; document.getElementById("tu4").style.borderColor="#666"; document.getElementById("tu5").style.borderColor="#666"; var b = parseInt(document.getElementById("ta").style.marginLeft); if(b==0) { document.getElementById("tu1").style.borderColor="red"; } else if(b==-800) { document.getElementById("tu2").style.borderColor="red"; } else if(b==-1600) { document.getElementById("tu3").style.borderColor="red"; } else if(b==-2400) { document.getElementById("tu4").style.borderColor="red"; } else { document.getElementById("tu5").style.borderColor="red"; } shi =window.setTimeout("huan()",3000); } var shi =window.setTimeout("huan()",3000); function pause() { window.clearTimeout(shi); } function conti() { shi = window.setTimeout("huan()",3000); } function dong(ad) { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(ad==-1) { if(a==0) { tu.style.marginLeft=-3200+"px"; } else { tu.style.marginLeft= (a+800)+"px"; } } else { if(a==-3200) { tu.style.marginLeft=0+"px"; } else { tu.style.marginLeft= (a-800)+"px"; } } document.getElementById("tu1").style.borderColor="#666"; document.getElementById("tu2").style.borderColor="#666"; document.getElementById("tu3").style.borderColor="#666"; document.getElementById("tu4").style.borderColor="#666"; document.getElementById("tu5").style.borderColor="#666"; var b = parseInt(document.getElementById("ta").style.marginLeft); if(b==0) { document.getElementById("tu1").style.borderColor="red"; } else if(b==-800) { document.getElementById("tu2").style.borderColor="red"; } else if(b==-1600) { document.getElementById("tu3").style.borderColor="red"; } else if(b==-2400) { document.getElementById("tu4").style.borderColor="red"; } else { document.getElementById("tu5").style.borderColor="red"; } } function xiaotu(x) { document.getElementById("tu1").style.borderColor="#666"; document.getElementById("tu2").style.borderColor="#666"; document.getElementById("tu3").style.borderColor="#666"; document.getElementById("tu4").style.borderColor="#666"; document.getElementById("tu5").style.borderColor="#666"; if(x==1) { document.getElementById("ta").style.marginLeft="0px"; document.getElementById("tu1").style.borderColor="red"; } else if(x==2) { document.getElementById("ta").style.marginLeft="-800px"; document.getElementById("tu2").style.borderColor="red"; } else if(x==3) { document.getElementById("ta").style.marginLeft="-1600px"; document.getElementById("tu3").style.borderColor="red"; } else if(x==4) { document.getElementById("ta").style.marginLeft="-2400px"; document.getElementById("tu4").style.borderColor="red"; } else { document.getElementById("ta").style.marginLeft="-3200px"; document.getElementById("tu5").style.borderColor="red"; } } function fengqin() { var li1 =parseInt(document.getElementById("l1").style.width); var li2 =parseInt(document.getElementById("l2").style.width); var li3 =parseInt(document.getElementById("l3").style.width); var li4 =parseInt(document.getElementById("l4").style.width); var li5 =parseInt(document.getElementById("l5").style.width); document.getElementById("l1").style.width="100px"; document.getElementById("l2").style.width="100px"; document.getElementById("l3").style.width="100px"; document.getElementById("l4").style.width="100px"; document.getElementById("l5").style.width="100px"; if(li1==800) { document.getElementById("l2").style.width="800px"; } else if(li2==800) { document.getElementById("l3").style.width="800px"; } else if(li3==800) { document.getElementById("l4").style.width="800px"; } else if(li4==800) { document.getElementById("l5").style.width="800px"; } else { document.getElementById("l1").style.width="800px"; } change=window.setTimeout("fengqin()",3000); } function fq(c) { document.getElementById("l1").style.width="100px"; document.getElementById("l2").style.width="100px"; document.getElementById("l3").style.width="100px"; document.getElementById("l4").style.width="100px"; document.getElementById("l5").style.width="100px"; if(c==1) { document.getElementById("l1").style.width="800px"; } else if(c==2) { document.getElementById("l2").style.width="800px"; } else if(c==3) { document.getElementById("l3").style.width="800px"; } else if(c==4) { document.getElementById("l4").style.width="800px"; } else if(c==5) { document.getElementById("l5").style.width="800px"; } } var change=window.setTimeout("fengqin()",3000); function stp() { window.clearTimeout(change); } function goon() { change=window.setTimeout("fengqin()",3000); } </script>
