原生JS實現圖片滿屏自動輪播求助，大神趕緊來吧！
阿新 • • 發佈：2019-02-04
上週去面試前端開發，那個程式猿大哥就直接讓我上機操練了，做一個“簡單”的網頁，當然，對我來說是很難的，畢竟剛開始學習。模板網頁的地址在這裡，有兩個：
搞了好長時間都沒弄出來，真的快要崩潰了，我就直接上程式碼吧，哪位大神看到支支招，給一些關鍵的建議，主要是滿屏圖片輪播不知道怎麼搞，求給一些思路，不能用Bootstrap等框架，要用原生的。
我直接上程式碼吧！
HTML部分(只貼了關鍵程式碼）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>深藍網路</title> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <div class="container"> <div class="wrap"> <img src="img/ad_01.jpg" alt=""> <img src="img/ad_02.jpg" alt=""> <img src="img/ad_03.jpg" alt=""> <img src="img/ad_04.jpg" alt=""> <img src="img/ad_01.jpg" alt=""> </div> </div> <div class="aside"> <span>再小的品牌，也有自己的平臺</span> <div class="btn"> <a href="#">立即登入</a> </div> <div class="down"> <img src="img/down.png" alt=""> </div> </div> ...
CSS部分
*{ margin:0; padding:0; } body{ background-color: #e7e8eb; font-family: 微軟雅黑,"Microsoft YaHei"; } .wp{ width:1230px; margin: 0 auto; } .container { position: relative; width: 100%; height: 100%; margin:0 auto; box-shadow: 0 0 5px green; overflow:hidden; } .container .wrap { position: absolute; width: auto; height: auto; z-index: 1; } .container .wrap img { float: left; width: 100%; height: 100%; max-width: 100%; } .container .buttons { position: absolute; right: 5px; bottom:40px; width: 150px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: red; } .aside{ position: absolute; top:400px; z-index: 99; width: 100%; text-align: center; } .aside span{ font-size: 60px; color: #FFF; height: 70px; } .down{ display: inline-block; width: 35px; height:37px; margin: 0 auto; } .btn{ background-color: #428bca; border: none; width: 140px; height: 50px; border-radius: 10%; margin-left: auto; margin-right: auto; margin-top:200px; margin-bottom: 80px; } .btn a{ text-decoration: none; color: #fff; font-size: 20px; display: inline-block; margin: 10px; } .btn:hover{ background-color: #356792; }
JS部分
window.onload=function(){ var wrap = document.querySelector(".wrap"); var next = document.querySelector(".arrow_right"); var prev = document.querySelector(".arrow_left"); var container = document.querySelector(".container"); var imgs = wrap.children; var index = 0; /*這個地方想直接動態的將瀏覽器的寬高賦值給容器和圖片集的區域，但是好像沒啥用*/ var cliWidth = this.document.body.clientWidth; var clientHeight = this.document.body.clientHeight; container.clientWidth = cliWidth; container.clientHeight = cliHeight; wrap.clientWidth = cliWidth; wrap.clientHeight = cliHeight; /* next.onclick = function () { next_pic(); } prev.onclick = function () { prev_pic(); } */ /*切換到下一張圖*/ /*這裡來進行切換*/ function next_pic () { index++; if(index > 3){ index = 0; } // showCurrentDot(); var newLeft; if(wrap.style.left === ((-cliWidth*4)+'px')){ newLeft = -cliWidth; }else{ newLeft = parseInt(wrap.style.left)-cliWidth; } wrap.style.left = newLeft + "px"; } /*切換到上一張圖*/ /*不用按鈕，所以把上一張圖的程式碼給註釋掉 function prev_pic () { index--; if(index < 0){ index = 3; } showCurrentDot(); var newLeft; if(wrap.style.left === "0px"){ newLeft = -7680; }else{ newLeft = parseInt(wrap.style.left)+1920; } wrap.style.left = newLeft + "px"; }*/ /*設定定時器和自動播放 var timer = null; function autoPlay () { timer = setInterval(function () { next_pic(); // alert(index); },4000); } autoPlay();
給一些具體思路給我