DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 原生JS實現輪播效果+學前端的感受(防止走火入魔)
原生JS實現輪播效果+學前端的感受(防止走火入魔)
編輯:關於JavaScript     

插件!插件!天天聽到有人求這個插件,那個插件的,當然,用第三方插件可以大幅提高開發效率,但作為新手,我還是喜歡自己來實現,主要是我有時間!

今天我來給大家分享下用原生JS實現圖片輪播的寫法

前輩們可以無視下面這段廢話:

在開始之前,先說下我學前端到現在的一點感受。到今天應該有兩個月左右了吧,基本每天6-10小時的學習時間,純自學,據說培訓不靠譜!本人目前的階段是只會三大件(HTML5、CSS3、javascript),其它所有知識都還排在學習計劃後面....現在正處在迷茫期,不知道下面該先學什麼了!不管了,先把三大件整溜一點再說吧,前輩們若有什麼好的建議,希望指點!

從HTML5到CSS3,一路過來,感覺前端挺簡單的,就有點信心滿滿,動力十足,接著學JS,以前學過C#、蘋果的swift,都是面向對象的強類型的語言,比較先進,不過我還是喜歡前端,所以轉到這裡來了,開始學JS也覺得挺容易的,就是感覺這門語言有點亂,跟別人不太一樣!而權威指南有些東西不容易弄明白,沒辦法,就多百度,多看別人對一些比如閉包、原型等概念的理解,慢慢的也就能掌握的7788了,到了這個階段,你也許已經慢慢的了解到,原來前端它包括很多東西!一堆的第三方類庫、框架等等,還有很多其它東西,總之,新名詞不斷的在你眼前冒出來,有的說這個要過時了,那個即將是主流,好亂!好亂!接下去我該怎麼走?先學什麼?後學什麼?

我目前就處在這個階段,有時候會連續兩天什麼都看不下去,也睡不著覺,心煩意亂,就是:走火入魔了!

我就想啊,我這是怎麼了?想不明白啊!算了,先休息下,鍛煉下身體吧!就去跑步,瞎逛!一邊思考:怎麼讓自己重新進入狀態!

後來我是這麼做的:給自己點糖吃!(自己先動手做一些比較簡單的實例)

我發現,這糖還真甜,我居然能做出來!成就感悠然而生,動力也就十足了!我就一個實例接著一個實例的寫,不懂、對API不熟悉就翻文檔(在看別人的代碼之前自己先寫,實在不會了再看),慢慢的,我感覺自己真的又回來了,開始步入正軌了!

我還特地看了下,目前大部分招前端的公司都需要什麼樣的人,然後重新給自己制定了學習計劃,當然,因為眼下我有時間,所以我想拿一段時間出來先鞏固下3大基礎,多練習,然後回頭再過一遍文檔,多了解它們的基本的、內在的原理!下一步不管學什麼,就容易上手的多了!同時,繼續多了解前端!多了解這個職業的前景和走向,就是給自己建立一個前端的世界觀,這樣,學起來才不會迷失方向!

至於該學哪些第三方類庫、框架,我目前也不知道,JQ過時了嗎?需不需學?我也不知道,也先不管了,就先玩玩原生吧!以後應該自然就知道了吧!

實戰開始,下面是代碼和演示,

前輩的面向對象寫法,目前本人還學不來,我只會寫一些函數,呵呵!(圖片來自網絡,也可自己切個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" href="http://www.cnblogs.com/susufufu/" target="_blank">蘇福的博客</a>

  <ul id="slide-nav">
  </ul>

  <div id="slide-main" class="slide-content1 slide-content2">
    <a class="a-img" title="用原生JS讀寫CSS樣式的方法總結" href="http://www.cnblogs.com/susufufu/p/5749922.html" 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中的事件處理概覽與原理" href="http://www.cnblogs.com/susufufu/p/5768431.html" 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="選取文檔元素的方法總結" href="http://www.cnblogs.com/susufufu/p/5738673.html" 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="窗口、窗體之間的關系" href="http://www.cnblogs.com/susufufu/p/5714020.html" 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是如何運行的嗎?" href="http://www.cnblogs.com/susufufu/p/5759480.html" 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實現輪播效果+學前端的感受(防止走火入魔)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved