JS实现banner图轮换
方法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div> <img src="../img/110.jpg" width="970" height="280" id="img" /> </div> </div> <script type="text/javascript"> var curIndex=0; var arr=new Array(); arr[0]="../img/111.jpg"; arr[1]="../img/112.jpg"; arr[2]="../img/110.jpg"; setInterval(function(){ var img=document.getElementById("img"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } img.src=arr[curIndex]; } ,3000); </script> </body> </html>
方法二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0px; margin: 0px; } #banner{ width: 100%; overflow: hidden; white-space: nowrap; position: relative; } #banner #inside{ width: 9600px; position: relative; left: 50%; margin-left: -960px; transition: all 1s ease; } #banner img{ width: 1920px; } #bannerNum{ padding: 0px; list-style: none; overflow: hidden; width: 160px; position: absolute; bottom: 30px; right: 50px; } #bannerNum li{ width: 30px; height: 30px; background-color: white; text-align: center; line-height: 30px; margin: 0px 5px; float: left; cursor: pointer; } </style> <script> var num = 1; var inside; window.onload = function(){ inside = document.getElementById("inside"); var interval = setInterval(function(){ inside.style.transition = "all 1s ease"; num++; switch (num){ case 1: inside.style.transition = "none"; inside.style.marginLeft = (-960)+"px"; break; case 2: inside.style.marginLeft = (-960-1920)+"px"; break; case 3: inside.style.marginLeft = (-960-1920*2)+"px"; break; case 4: inside.style.marginLeft = (-960-1920*3)+"px"; break; case 5: inside.style.marginLeft = (-960-1920*4)+"px"; num = 0; break; default: break; } },2000); } function changeBanner(num1){ inside.style.transition = "none"; switch (num1){ case 1: inside.style.marginLeft = (-960)+"px"; break; case 2: inside.style.marginLeft = (-960-1920)+"px"; break; case 3: inside.style.marginLeft = (-960-1920*2)+"px"; break; case 4: inside.style.marginLeft = (-960-1920*3)+"px"; break; default: break; } num = num1-1; } </script> </head> <body> <div id="banner"> <div id="inside"><img src="../img/110.jpg" id="img1" /><img src="../img/111.jpg" id="img2" /><img src="../img/112.jpg" id="img3" /><img src="../img/111.jpg" id="img4" /><img src="../img/110.jpg" id="img5" /> </div> <ul id="bannerNum"> <li onclick="changeBanner(1)">1</li> <li onclick="changeBanner(2)">2</li> <li onclick="changeBanner(3)">3</li> <li onclick="changeBanner(4)">4</li> </ul> </div> </body> </html>
