第一次嘗試自己寫輪播圖
阿新 • • 發佈：2017-05-13
parse function clas top 立即執行 嘗試 con arrow add
其實嗯，對於前端我與很多很多想說的話，但是看著種種最後卻不知道說什麽了，既然這樣那就什麽都不要說
第一次嘗試自己寫輪播圖，對於初學前端的我來說我感覺我晚了很久了
為什麽要模仿寫一份出來呢，我也不知道，做個紀念吧
html代碼頁面
7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="UTF-8"> 11 <title></title> 12 <link rel="stylesheet" type="text/css"href="css/Carousel_XM.css"/> 13 <script src="js/Carousel_XM.js" type="text/javascript" charset="utf-8"></script> 14 </head> 15 <body> 16 <div class="contern" id="contern"> 17 <!--image--> 18 <!--當你從最後一張圖切換回第一張圖時，有很大空白，利用兩張輔助圖來填補這個空白。19 這裏補充下無縫滾動，直接看代碼，復制最後一張圖片放置第一張圖片前，同時復制第一張圖片放置最後一張圖片的後面。 20 並且，將第一張圖片輔助圖（實際上是實際顯示的第5張圖片隱藏起來，故設置style="left: -600px;"）--> 21 <div class="list" id="list" style="left: -600px;"> 22 <ul> 23 <li><img src="img/img-4.jpg"alt="" /></li> 24 25 <li><img src="img/img-1.jpg" alt="" /></li> 26 <li><img src="img/img-2.jpg" alt="" /></li> 27 <li><img src="img/img-3.jpg" alt="" /></li> 28 <li><img src="img/img-4.jpg" alt="" /></li> 29 30 <li><img src="img/img-1.jpg" alt="" /></li> 31 </ul> 32 </div> 33 <!--button--> 34 <div class="buttons" id="buttons"> 35 <ul> 36 <li index=1 id="on" class="on"></li> 37 <li index=2 ></li> 38 <li index=3 ></li> 39 <li index=4 ></li> 40 </ul> 41 </div> 42 <!--left right button--> 43 <a href="javascript:;" class="prev arrow" id="prev"><</a> 44 <a href="javascript:;" class="next arrow" id="next">></a> 45 </div> 46 </body> 47 </html>
css代碼頁面
1 *{ 2 margin: 0;padding: 0; 3 text-decoration: none; 4 } 5 li{ 6 list-style-type: none; 7 } 8 body{ 9 padding: 100px; 10 } 11 /*隱藏其他的圖片*/ 12 .contern{ 13 width: 600px;height: 400px; 14 border: 1px solid red; 15 position: relative; 16 overflow: hidden; 17 } 18 /*使用定位顯示第二張圖片*/ 19 .contern .list{ 20 width: 3600px;height: 400px; 21 position: absolute; 22 } 23 .contern .list ul{ 24 width: 3600px;height: 400px; 25 } 26 .contern ul li{ 27 width:600px;height: 400px; 28 float: left; 29 } 30 .contern ul li img{ 31 width: 600px;height: 400px; 32 } 33 /*按鈕*/ 34 .buttons { 35 width: 100px;height: 10px; 36 position: absolute; 37 bottom: 10px; 38 left: 40%; 39 z-index: 2; 40 } 41 .buttons ul li { 42 width: 10px;height: 10px; 43 float: left; 44 margin-left: 10px; 45 border-radius:10px; 46 background-color: white; 47 } 48 .buttons ul .on { 49 background-color: red; 50 } 51 /*左右*/ 52 .arrow{ 53 width: 50px ; 54 height: 70px; 55 position: absolute; 56 top: 180px; 57 /*left: 0px;*/ 58 z-index: 2; 59 font-size: 50px; 60 background-color: red; 61 color: white; 62 display: block; 63 } 64 .next{ 65 right: 0px; 66 }
js代碼的模塊
//按鈕手動切換效果 window.onload=function(){ var list=document.getElementById("list"); var prev=document.getElementById("prev"); var next=document.getElementById("next"); var contern=document.getElementById("contern") //getElementsByTagName指定標簽合 var buttons=document.getElementById("buttons").getElementsByTagName("li"); var index=1 var timer; function animates(a){ // //獲取的是style.left，是相對左邊獲取距離，所以第一張圖後style.left都為負值， //且style.left獲取的是字符串，需要用parseInt()取整轉化為數字。 var newlift=parseInt(list.style.left)+a; list.style.left=newlift+‘px‘; //偏移量判斷 if(newlift>-600){ list.style.left=-2400+‘px‘; } if(newlift<-2400){ list.style.left=-600+‘px‘; } } //小圓圈跟隨 function buttonShow(){ //清除樣式 for (var i=0;i<buttons.length;i++ ){ if(buttons[i].className==‘on‘){ buttons[i].className=‘‘; } } buttons[index-1].className=‘on‘; } //點擊圓圈 for(var i=0;i<buttons.length;i++){ //立即執行函數 (function(i){ buttons[i].onclick=function(){ var chilckindex=parseInt(this.getAttribute(‘index‘)); var offset=600*(index-chilckindex); animates(offset); index=chilckindex; buttonShow(); } })(i) } //兩個按鈕 prev.onclick=function(){ index-=1; if(index<1){ index=4; } buttonShow(); animates(600); } next.onclick=function(){ index+=1; if(index>4){ index=1; } buttonShow(); animates(-600); } //定時器自動播放 play(); //停止 contern.onmouseover=stop; contern.onmouseout=play; } //自動播放 //對於定時器，有必要說明一下setInterval()跟setTimeout的區別了。 //簡單來說，setInterval()執行多次，setTimeout()只執行一次。 function play(){ timer=setInterval(function (){ next.onclick(); },1500) } //鼠標懸停 function stop(){ clearInterval(timer); }
其實很就簡單，只是想給自己做個時間軸，看看自己都學了什麽
第一次嘗試自己寫輪播圖