插件！插件！天天聽到有人求這個插件，那個插件的，當然，用第三方插件可以大幅提高開發效率，但作為新手，我還是喜歡自己來實現，主要是我有時間！
今天我來給大家分享下用原生JS實現圖片輪播的寫法
前輩們可以無視下面這段廢話：
在開始之前，先說下我學前端到現在的一點感受。到今天應該有兩個月左右了吧，基本每天6-10小時的學習時間，純自學，據說培訓不靠譜！本人目前的階段是只會三大件（HTML5、CSS3、javascript）,其它所有知識都還排在學習計劃后面....現在正處在迷茫期，不知道下面該先學什么了！不管了，先把三大件整溜一點再說吧，前輩們若有什么好的建議，希望指點！
從HTML5到CSS3，一路過來，感覺前端挺簡單的，就有點信心滿滿，動力十足，接著學JS，以前學過C#、蘋果的swift，都是面向對象的強類型的語言，比較先進，不過我還是喜歡前端，所以轉到這里來了，開始學JS也覺得挺容易的，就是感覺這門語言有點亂，跟別人不太一樣！而權威指南有些東西不容易弄明白，沒辦法，就多百度，多看別人對一些比如閉包、原型等概念的理解，慢慢的也就能掌握的7788了，到了這個階段，你也許已經慢慢的了解到，原來前端它包括很多東西！一堆的第三方類庫、框架等等，還有很多其它東西，總之，新名詞不斷的在你眼前冒出來，有的說這個要過時了，那個即將是主流，好亂！好亂！接下去我該怎么走？先學什么？后學什么？
我目前就處在這個階段，有時候會連續兩天什么都看不下去，也睡不著覺，心煩意亂，就是：走火入魔了！
我就想啊，我這是怎么了？想不明白??！算了，先休息下，鍛煉下身體吧！就去跑步，瞎逛！一邊思考：怎么讓自己重新進入狀態！
后來我是這么做的：給自己點糖吃！（自己先動手做一些比較簡單的實例）
我發現，這糖還真甜，我居然能做出來！成就感悠然而生，動力也就十足了！我就一個實例接著一個實例的寫，不懂、對API不熟悉就翻文檔（在看別人的代碼之前自己先寫，實在不會了再看），慢慢的，我感覺自己真的又回來了，開始步入正軌了！
我還特地看了下，目前大部分招前端的公司都需要什么樣的人，然后重新給自己制定了學習計劃，當然，因為眼下我有時間，所以我想拿一段時間出來先鞏固下3大基礎，多練習，然后回頭再過一遍文檔，多了解它們的基本的、內在的原理！下一步不管學什么，就容易上手的多了！同時，繼續多了解前端！多了解這個職業的前景和走向，就是給自己建立一個前端的世界觀，這樣，學起來才不會迷失方向！
至于該學哪些第三方類庫、框架，我目前也不知道，JQ過時了嗎？需不需學？我也不知道，也先不管了，就先玩玩原生吧！以后應該自然就知道了吧！
實戰開始，下面是代碼和演示，
前輩的面向對象寫法，目前本人還學不來，我只會寫一些函數，呵呵?。▓D片來自網絡，也可自己切個300*200圖片來查看效果，點擊‘漸進漸出'按鈕開始）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } #slide{ position: absolute; top: 100px; left: 50px; width: 300px; height: 200px; border: 1px solid gray; } #slide .blog-name{ display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; line-height: 25px; background-color: rgba(155,155,155,0.5); z-index: 4; cursor: pointer; text-indent: 3px; } #slide-nav{ position: absolute; right: 5px; bottom: 5px; z-index: 5; } #slide-nav li{ display: inline-block; width: 16px; text-align: center; line-height: 16px; border-radius: 5px; cursor: pointer; overflow:hidden; } #slide-nav li:hover,.selected{ background-color: #336699; color: white; } .slide-content1{ position: absolute; width: 300px; height: 200px; font-size: 0; } .slide-content1 a{ position: absolute; cursor: pointer; } .slide-content1 a:visited{color: black;} #model-btn{ position: absolute; top: -25px; font-size: 20px; } </style> <script> window.onload = function(){ var sufuImageScrooller = function(){ //幾個工具函數 function show(img){ var id; for ( var i = 0; i <= 21; i++) { var op = i * 5; id = setTimeout(function(e) { setOpacity(img, e) }.bind(this,op), i * 50); } clearTimeout(id); } function hide(img){ var id; for ( var i = 0; i <= 21; i++) { var op = 100 - i * 5; id = setTimeout(function(e) { setOpacity(img, e) }.bind(this,op), i * 20); } clearTimeout(id); } function getById(id){ return document.getElementById(id); } function setOpacity(elem,level){ if(elem.filter){ elem.style.filter = "alpha(opacity=" + level + ")"; //兼容IE }else{ elem.style.opacity = level/100; } } //(漸進漸出模式)主體函數 function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ //防止多次點擊模式選擇按鈕創建更多的li if(getById('slide-nav').childElementCount !== 0){return} //創建導航按鈕 var nav = []; var targetIdext = 0; //保存圖片狀態信息 var cureentIdext = 0; //保存圖片狀態信息 var frag = document.createDocumentFragment(); for(var i=0;i<nums;i++){ nav[i] = frag.appendChild(document.createElement('li')); //appendChild方法會返回該li nav[i].innerHTML = i+1; } getById(navId).appendChild(frag); //初始化為顯示第一張圖片 var imgs = getById(imgContainerId).getElementsByTagName('a'); var info = getById(imgInfoId); info.innerHTML = imgs[0].title.slice(0,12)+'...'; nav[0].className = 'selected'; //動態改變li的className來改變它的樣式 for(var j=1;j<nav.length;j++){ setOpacity(imgs[j],0); } //開始自動輪播 var id; function start(delay){ id = setInterval(function(){ hide(imgs[cureentIdext]); nav[cureentIdext].className = ''; if(targetIdext<nums-1){ targetIdext ++; }else{ targetIdext = 0; } cureentIdext = targetIdext; show(imgs[targetIdext]); nav[targetIdext].className = 'selected'; info.innerHTML = imgs[targetIdext].title.slice(0,12)+'...'; },delay); } start(delay); //為每個導航按鈕添加事件 for(var k=0;k<nav.length;k++){ nav[k].onclick = function(event){ var e = event||window.event; //兼容IE var t = event.target||event.srcElement; //兼容IE var idex = parseInt(t.innerHTML)-1; console.log('idex:'+idex+' t:'+targetIdext+' c:'+cureentIdext); if(idex === cureentIdext){return;} hide(imgs[cureentIdext]); nav[cureentIdext].className = ''; cureentIdext = idex; show(imgs[idex]); nav[idex].className = 'selected'; info.innerHTML = imgs[idex].title.slice(0,12)+'...'; } } getById(navId).onmouseover = function(){clearInterval(id)}; getById(navId).onmouseout = function(){start(delay)}; } //從右向左模式函數 function fromRightModel(nums,navId,imgContainerId,imgInfoId,delay){ alert('博主偷懶,忘記實現這個函數了!需要請留言!'); } function fromTopModel(nums,navId,imgContainerId,imgInfoId,delay){ alert('博主偷懶,忘記實現這個函數了!需要請留言!'); } return { inOutModel: inOutModel, fromRightModel: fromRightModel, fromTopModel: fromTopModel, getById: getById } }(); sufuImageScrooller.getById('model-btn1').onclick = function(){ sufuImageScrooller.inOutModel(5,'slide-nav','slide-main','slide-info',3500); }; sufuImageScrooller.getById('model-btn2').onclick = function(){ sufuImageScrooller.fromRightModel(5,'slide-nav','slide-main','slide-info',3500); }; sufuImageScrooller.getById('model-btn3').onclick = function(){ sufuImageScrooller.fromTopModel(5,'slide-nav','slide-main','slide-info',3500); }; }; </script></head><body><div id="slide"> <a id="slide-info" class="blog-name" target="_blank">蘇福的博客</a> <ul id="slide-nav"> </ul> <div id="slide-main" class="slide-content1 slide-content2"> <a class="a-img" title="用原生JS讀寫CSS樣式的方法總結" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </div> </a> <a class="a-img" title="DOM中的事件處理概覽與原理" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg"> </div> </a> <a class="a-img" title="選取文檔元素的方法總結" target="_blank"> <div> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"> </div> </a> <a class="a-img" title="窗口、窗體之間的關系" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </div> </a> <a class="a-img" title="你真的知道setTimeout是如何運行的嗎?" target="_blank"> <div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg"> </div> </a> </div> <div id="model-btn"> <input type="button" id="model-btn1" value="漸進漸出"> <input type="button" id="model-btn2" value="從右向左"> <input type="button" id="model-btn3" value="從上至下"> </div></div></body></html>一開始，先想，該怎么實現：不就利用定時器改變圖片，過場改變圖片的opacity嗎？
一、html排版比較簡單：
<ul id="slide-nav"> </ul><div id="slide-main" class="slide-content1"> <a class="a-img" title="" href="" target="_blank"> <div> <img src="lg1.png"> </div> </a> ...</div>...
slide-info用來顯示圖片標題，slide-nav是數字按鈕，slide-main就是圖片容器了，里面放圖片鏈接，
標簽里面沒寫li，因為它是通過JS動態創建的；
二、CSS樣式的設置，只要你親自去體驗，就都能明白了，注意點：
•自己布局前，先最好把父元素加border，這樣一幕了然，最后再去掉
•ul li 等很多標簽默認是有padding的，所有要把它設為0；
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; }height: 25px;和line-height: 25px;兩個相等，可以讓字居中
z-index 只相對于你的兄弟和子輩，對于旁系的親戚無效，如果想讓它顯示在旁系的親戚前面，就設置旁系的親戚的祖先，比如你的爺爺是宰相，你的二爺是農民，那么你們家所有人身份都比你二爺家的所有人的身份都尊貴
•position: absolute;也是和他的父輩有關系的，父輩沒設置定位，靠不住啊，那就繼續往上找依靠，直到找到為止，然后依靠他來定位！
•如果你要實現從右向左的效果，記住font-size:0;清楚圖片之間的間距，讓圖片肩并肩！
俗話說，熟能生巧，只有CSS基礎扎實，才能把控好布局！比如下面這個雙飛翼布局，不需要定位就能實現：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } .header,.footer{ width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: greenyellow; } .container{ overflow: hidden; *zoom: 1; } .left{ float: left; width: 100px; height: 100px; margin-left: -100%; background-color: green; } .main{ float: left; width: 100%; height: 100px; background-color: gray; } .right{ float: left; width: 200px; height: 100px; margin-left: -200px; background-color: gold; } .center{ padding-left: 100px; padding-right: 200px; } </style></head><body><div class="header">header</div><div class="container"> <div class="main"> <div class="center">main-center</div> </div> <div class="left">left</div> <div class="right">right</div></div><div class="footer">footer</div></body></html>三、代碼的實現
先寫大綱：
var sufuImageScrooller = function(){function getById(id){...} //通用獲取元素對象function setOpacity(elem,level){...} //設置透明度function hide(img){...} //淡入function show(omg){...} //淡出function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ ... } //主函數體return {inOutModel: inOutModel,...}}();這樣的寫法就可以通過sufuImageScrooller來調用inOutModel方法了，sufuImageScrooller. inOutModel(5,'slide-nav','slide-main','slide-info',3500);
inOutModel(nums,navId,imgContainerId,imgInfoId,delay)參數：nums創建li數量，必須和圖片數量對應，navId數字按鈕容器id，imgContainerId圖片容器id，imgInfoId顯示圖片title信息id，delay指定切換圖片延遲時間；
大綱寫出來了，就完成了一大半了，其它就是具體細節代碼的實現了，我寫的不是很好，只能說實現了這個功能，大家自己琢磨，如果有好的建議歡迎提出；
從inOutModel函數開始切入，然后步步深入，關鍵在于動手打出來，光看的話體會沒那么深刻！
好了，就介紹到這一步了，不會的自己多翻文檔API，也可留言問我
以上這篇原生JS實現輪播效果+學前端的感受(防止走火入魔)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
