輪播圖--原生js實現
阿新 • • 發佈：2019-02-05
今天抽空練習了一下輪播圖的製作, 發現問題很多啊!
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <linkrel="stylesheet"href="index.css"> <title>Document</title> </head> <body> <divid="wrapper"> <divclass="items"> <ulclass="banner"style="left: -200px"> <li> <a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FrN60ozLdKaIU0ks6u0G69ni5IIb.gif"alt=""></a> </li> <li> <a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FmOZHFnDJUgOGFGbjs8fmPUDzV4K.gif"alt=""></a> </li> <li> <a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FqcLkk-cP85-IOPrGSjcETb5y9sr.gif"alt=""></a> </li> <li> <a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FqVnaFhpWu9DZqMp8HHpHqy4tWzk.gif"alt=""></a> </li> <li> <a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FqY_Gl5GIc-yK5SyuMZLTCBHoKp7.gif"alt=""></a> </li> </ul> </div> <divclass="clear"></div> <divclass="change"> <ulid="dots"> <li><aclass="active">1</a></li> <li><aclass="">2</a></li> <li><aclass="">3</a></li> <li><aclass="">4</a></li> <li><aclass="">5</a></li> </ul> </div> <divid="pre"class="hidden"><</div> <divid="next"class="hidden">></div> <scriptsrc="animate.js"type="text/javascript"></script> </div> </body> </html>
首先是html, 要注意的是, 想要實現水平放置圖片並留出展示視窗, 如果使用列表的話, 需要在圖片列表的外面套一層div, 寬度設定為圖片總寬度, position設定為relative, overflow設定為hidden, 這樣就可以把不需要的部分遮起來, 而ul則設定為absolute, 以改變它的left來實現輪換.
* { padding:0; margin:0; } img { width:200px; height:200px; } ul li { list-style:none; float:left; } #wrapper{ margin:0auto; width:200px; height:200px; position:relative; overflow:hidden; } .items{ height:100%; float:left; } .items ul{ position:absolute; z-index:1; width:1000px; height:200px; left: -200px; } .change{ width:120px; height:20px; float:right; position:absolute; right:40px; bottom:5px; z-index:5; } .change ul{ margin-left:10px; } .change ul li{ width:20px; } .change .active { background:lightpink; color:lightpink; width:15px; } .change ul li a{ width:10px; height:10px; display:inline-block; background:#fff; border-radius:10px; text-align:center; font-size:5px; line-height:10px; cursor:pointer; color:#fff; } #pre, #next { width:20px; height:20px; background:#fff; font-size:5px; font-weight:900; text-align:center; line-height:20px; position:absolute; top: 50%; z-index:3; cursor:pointer; opacity:0.5; } #pre { left: 0; } #next { right:0; } .hidden{ display:none; } .change ul li a.hidden{ background:#fff; color:#000; }
css這部分程式碼寫得比較亂, 不過總體沒有什麼太大問題.
var next=document.getElementById("next"); var prev=document.getElementById("pre"); var item=document.getElementsByClassName("banner")[0]; var wrapper=document.getElementById("wrapper"); var index=0; var dots=document.getElementById("dots").getElementsByTagName("li"); next.onclick=function(){ next_pic(); } prev.onclick=function(){ prev_pic(); } function next_pic(){ var newLeft=parseInt(item.style.left)-200; if (newLeft===-1000){ newLeft =0; } item.style.left=newLeft + "px"; index++; if (index>dots.length-1) { index =0; } dotActive(); } function prev_pic(){ var newLeft=parseInt(item.style.left)+200; if (newLeft===200) { newLeft =-800; } item.style.left=newLeft + "px"; index--; if (index<0) { index =dots.length; } } var timer=null; function autoPlay(){ timer =setInterval(function(){ next_pic(); }, 3000); } autoPlay(); wrapper.onmouseover=function(){ clearInterval(timer); prev.className=""; next.className=""; } wrapper.onmouseleave=function(){ autoPlay(); prev.className="hidden"; next.className="hidden"; } function dotActive(){ for (leti= 0;i< dots.length;i++){ dots[i].firstChild.className=""; } dots[index].firstChild.className="active"; } function manuChange(){ for (leti= 0;i< dots.length;i++){ (function(i){ dots[i].firstChild.onclick=function(){ var newLeft=i * (-200); item.style.left=newLeft + "px"; index =i; dotActive(); } })(i) } } manuChange();
寫js程式碼的時候卡了一下,忘了getElementsClassName獲取的是一個物件陣列, 需要[index]來選擇所需的元素, 在此除錯花費了好多時間; 還有就是在使用--.style.left時需要先在html程式碼中加入內聯的left屬性, style="left: --".
這次只是簡單的實現的輪換效果, 優化和美觀處理還沒有做.(不過效果不錯感興趣的可以試試, 希望大家多多提意見)