闲来无事，做一主页业轮播图玩玩，废话不多述，直接撸代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link type="text/css" href="./style.css" rel="stylesheet" /> <script> var x = 1; var y = 2; var count = 44; function alterImg(){ leftdiv = document.getElementById("my0" + x); rightdiv = document.getElementById("my0" + y); leftwidth = leftdiv.style.width; rightwidth = rightdiv.style.width; //console.log(leftwidth); //console.log(rightwidth); //alert(leftwidth); leftw = leftwidth.substring(0,leftwidth.indexOf("p")); if(x == 5){ console.log(rightdiv); rightdiv.style.float="right"; }else{ document.getElementById("my01").style.float="left"; } if(leftw == 0){ if(count != 0){ count--; }else{ x = x==5 ? 1 : x+1; y = y==5 ? 1 : y+1; count = 44; } }else{ rightw = rightwidth.substring(0,rightwidth.indexOf("p")); //alert(leftw); leftdiv.style.width = (leftw - 20) + "px"; rightdiv.style.width =(Number(rightw) + 20) + "px"; } } function autoAlter() { //每200毫秒，就让当前左侧的图爱你缩小20宽，当前右侧的图片扩大20宽 window.setInterval(alterImg,50); //2秒=2000毫秒=40个50毫秒 } </script> </head> <body onload="autoAlter()"> <!-- <input type="button" value="执行轮播" onclick="autoAlter()" /> --> <div style="width: 500px; height: 300px;"> <div id="my01" style="float:left; width: 500px; height: 300px;"> <img src="image/p1.jpg" title="美景" /> </div> <div id="my02" style="float:left; width: 0px; height: 300px;"> <img src="image/p2.jpg" title="美女" /> </div> <div id="my03" style="float:left; width: 0px; height: 300px;"> <img src="image/p3.jpg" title="小草" /> </div> <div id="my04"style="float:left; width: 0px; height: 300px;"> <img src="image/p4.jpg" title="草原" /> </div> <div id="my05"style="float:left; width: 0px; height: 300px;"> <img src="image/p5.jpg" title="小猫" /> </div> </div> </body> </html>下面是一个简单的CSS样式：
img{ width: 100%; height: 100%; }以上就整个轮播图的代码。
