輪播圖首頁
阿新 • • 發佈：2018-11-03
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a{ text-decoration: none; } .cle{ clear: both; } /*logo 部分的div*/ .header{ width: 100%; } .header div{ float:left; width:33.33%; height: 60px; line-height: 50px; } .header a{ padding: 15px; } /*選單部分*/ .menu{ width: 100%; background-color: #000; height: 50px; padding-top:1px } .menu ul li{ list-style-type: none; display: inline; } .menu a{ font-size: 25px; color: #fff; } /*輪播圖*/ .lunbo{ width:100%; margin-top:10px; margin-bottom: 10px; } .lunbo img{ width:100%; } /*熱門商品*/ /*.left,.right{ float:left; }*/ .left{ float:left; width: 16%; height: 500px; } .right{ float: left; width:84%; text-align: center; height: 500px; } .middle{ float:left; width: 50%; height: 250px; } .item{ float:left; width:16.66%; height: 250px; } /*給廣告*/ .ad1{ width: 100%; } .ad1 img{ width: 100%; } /*版權*/ .foot{ width:100%; } .foot p{ text-align: center; } </style> </head> <!-- 頁面載入成功之後輪播圖片--> <body onload="init()"> <!-- 一個大div中放置8個div --> <div> <!--logo 巢狀三個div --> <div class="header"> <div> <img src="../img/logo2.png" height="40px" /> </div> <div> <img src="../img/header.jpg" /> </div> <div> <a href="#">登入</a> <a href="#">註冊</a> <a href="#">購物車</a> </div> </div> <div class="cle"></div> <!--選單--> <div class="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">首頁</a></li> <li><a href="#">首頁</a></li> <li><a href="#">首頁</a></li> </ul> </div> <!--輪播圖--> <div class="lunbo"> <img id="lunbo" src="../img/1.jpg"/> </div> <!--熱門 將起劃分成兩個div 左邊放圖片 右邊的放商品 --> <div class="hot"> <!--存放熱門商品和一張圖片--> <div> <h2 style="display: inline;">熱門商品</h2> <img src="../img/title2.jpg" /> </div> <div> <!--存放左邊的圖片--> <div class="left"> <img src="../img/big01.jpg" /> </div> <!--存放商品圖片--> <div class="right"> <div class="middle"> <img src="../img/middle01.jpg" /> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">電飯煲</a></p> <p align="center">200</p> </div> </div> </div> </div> <div class="cle"></div> <!--廣告--> <div class="ad1"> <img src="../img/ad.jpg"/> </div> <!--最新--> <div></div> <!--廣告--> <div class="ad1"> <img src="../img/footer.jpg"/> </div> <!--版權foot--> <div class="foot"> <p> <a href="#">關於我們</a> <a href="#">關於我們</a> <a href="#">關於我們</a> <a href="#">關於我們</a> <a href="#">關於我們</a> </p> <p> Copyright © 2005-2016 傳智商城 版權所有 </p> </div> </div> </body> <script> var ImageObj; var i=1; function init(){ alert("success") setInterval(ImageChange,1000); } function ImageChange(){ i++; ImageObj=document.getElementById("lunbo"); ImageObj.src="../img/"+i+".jpg" if(i>=3){ i=0; } } </script> </html>