H5滾動輪播插件

  概述

JRedu

　隨着前端技術的發展，越來越多的H5技術被應用到實際開發中，尤其是js插件更是無處不用，本章節我們主要分享下如何去自己封裝一個滾動輪播插件。

 

1效果圖如下：

 

2主要功能  

支持超簡單使用

支持數據類型json對象

支持自動切換

支持前后翻頁

支持分頁點圖

支持動畫過渡

。。。

后續功能可以自己酌情添加

 

3實現方式

首先 ，我們需要一個容器，在這里只需要一個div就可以了，通過div的id就可以識別該容器，代碼如下

<div id="div1" style="width: 1000px;height: 400px;"></div>

然后我們約定數據類型，這里我們的數據類接收json對象數組，如下所示模擬四組數據

var array=[ {imgSrc:"1.jpg",title:"第一張圖"},
            {imgSrc:"2.jpg",title:"第二張圖"},
            {imgSrc:"3.jpg",title:"第三張圖"},
            {imgSrc:"4.jpg",title:"第四張圖"}];

接着就是為用戶提供接口，下面我們約定接口的方法名，以及需要用戶傳遞的數據如下：

initWithObjs({
    array:array,//傳入json對象數組
    id:"div1",//傳入容器的ID
    isAuto:true,//是否自動
    scrollDuration:2,//設置圖片滾動間隔
    leftIcon:"icon1.jpg",//前翻頁圖標
    rightIcon:"icon1.jpg",//后翻頁圖標
    currentColor:"red",//設置分頁點圖選中的顏色
    othersColor:"#fff"//設置其他點圖顏色
});

好了，到此為止我們的准備工作已經完成了，下面需要開始封裝方法了。首先新建一個js文件，這里取名jrscroollimg.js，創建方法initWithObjs（），並初始化所有數據

//1*************取出用戶傳遞的所有信息**************
//獲取數據數組
  array=obj.array;
if(array.length==0)return;

//設置添加的容器
dom=document.getElementById(obj.id);
if(!dom) return;
dom.style.position="relative";
dom.style.overflow="hidden";
//是否自動滾動
var isAuto=obj.isAuto||false;
//時間間隔，此條件只有在isAuto為true的情況才有效
 var duration=obj.scrollDuration||1;
//設置leftIcon
 var leftIcon= obj.leftIcon||"滾動輪播/l.png";
//設置右邊Icon
 var rightIcon= obj.rightIcon||"滾動輪播/r.png";
//設置當前點的顏色
currentColor= obj.currentColor||"black";
//設置未選中的點的顏色
othersColor= obj.otherColor||"white";

獲取到這些信息數據后，下一步就是根據傳遞過來的數據拼接滾動視圖。這里我們的思路是在用戶創建的容器里面添加一個div容器，讓該容器存放所有的img並占據一行依次排列(如果圖片過多需要優化 ，用三張圖或者四張圖來代替N張圖，這里不再講述)，通過移動該大div來實現滾動效果，如下圖所示

 

代碼如下

//2***********遍歷對象獲取所有的滾動條目****************
var width=parseFloat(dom.style.width)*array.length;
var height=dom.style.height;
var subdiv="<div  class='jr_subdiv' style='-webkit-transition:all 0.5s;position:relative;left:0;top:0;width: "+width+"px;height:"+height+"px'>";
for(var i=0;i<array.length;i++){
    var temObj=array[i];
    var temStr="<img src='"+temObj.imgSrc+"' style='width: "+dom.style.width+"px;height:"+height+"px'>";
    subdiv+=temStr;
 }
subdiv+="</div>";

通過開啟定時器來實現頁面的位置移動，這里還需要考慮到如果分別移動到兩邊的情況，當滾動視圖已經跳轉到最后一頁了，那么就需要重新循環到第一頁，對於上面的jr_subdiv，這里采取的是定位的方式，因此可以通過定位來實現位置的改變。還需要注意的是定時器的開啟與否還要取決於用戶設置的屬性來確定，如果用戶不設置自動滾動，那么定時器就沒有開啟的必要了，代碼如下：

//3***********增加定時器****************
if(isAuto){
    setInterval(function(){
        var jr_subdiv=dom.firstElementChild;
        var fleft=parseFloat(jr_subdiv.style.left);
        //如果是最后一頁，則立馬轉到第一頁
        if(fleft<=-1*parseFloat(dom.style.width)*(array.length-1)){
            //設置新的left
            jr_subdiv.style.left="0px";
            changeColor(0,currentColor,othersColor);
        }else{
            //設置新的left
            jr_subdiv.style.left=fleft-parseFloat(dom.style.width)+"px";
            var page=(fleft-parseFloat(dom.style.width))/parseFloat(dom.style.width)*-1;
            changeColor(page,currentColor,othersColor);
        }

    },duration*1000+500);
}

到目前位置，我們基本實現了可以自動滾動的效果了，但是距離功能完善還差好幾步，下面我們依次完善。接下來要做的就是左右按鈕啦，快點拼接吧，代碼如下：

//4***********增加左右按鈕****************
var leftImg="<img src='"+leftIcon+"' style='position:absolute;left:0;top:50%' onclick='changePage(0)'>";
var rightImg="<img src='"+rightIcon+"'  style='position:absolute;right:0;top:50%' onclick='changePage(1)'>";
subdiv+=leftImg;
subdiv+=rightImg;

拼接分頁點圖，點圖這里通過li來實現，代碼如下

//5***********拼接分頁按鈕****************
var temli="<ul style='position: absolute;left: 50%;bottom: 20px;text-align: center;'>";
    for(var i=0;i<array.length;i++){
        temli+="<li class='jrli' style='margin-left:10px;background-color: white;list-style: none;float: left;width: 10px;height: 10px;border-radius: 10px;' onclick='changePageByIdc("+i+")'></li>";
    }

   + "</ul>";
subdiv+=temli;

到目前為止，所有需要的標簽都已經就緒了，緊接着就是渲染到html中了：

 

//將拼接好的字符串寫入用戶傳遞過來的dom
dom.innerHTML=subdiv;

 

 

 

不知道大家有沒有注意到，我們在拼接左翻頁和右翻頁的圖標的時候添加一個方法changePage(flag),該方法會有一個參數：

0前翻頁 1 后翻頁，下面我們來晚上這個方法吧

代碼如下

/***
 *
 * @param flag 0向前  1向后
 */
function changePage(flag){
    var jr_subdiv=dom.firstElementChild;
    var fleft=parseFloat(jr_subdiv.style.left);

    if(flag==1){
        //如果是最后一頁，則立馬轉到第一頁
        if(fleft<=-1*parseFloat(dom.style.width)*(array.length-1)){
            //設置新的left
            jr_subdiv.style.left="0px";
        }else{
            //設置新的left
            jr_subdiv.style.left=fleft-parseFloat(dom.style.width)+"px";
        }
    }else{
        //如果是最后一頁，則立馬轉到第一頁
        if(fleft==0){
            //設置新的left
            jr_subdiv.style.left=-(array.length-1)*parseFloat(dom.style.width) +"px";
        }else{
            //設置新的left
            jr_subdiv.style.left=fleft+parseFloat(dom.style.width)+"px";
        }
    }
    var index=-parseFloat(jr_subdiv.style.left)/parseFloat(dom.style.width);

}

另外需要交互的就剩下分頁點圖了，我們也給點圖增加了事件，

 

通過點擊的索引選擇跳轉的頁面，實現跟上面類似代碼如下：

/***
 *
 * @param index
 */
function changePageByIdc(index){
    var jr_subdiv=dom.firstElementChild;
    var left= -parseFloat(dom.style.width)*index;
    jr_subdiv.style.left= left+"px";

}


/***
 *
 * @param index 索引
 * @param currentColor當前的顏色
 * @param othersColor其他的顏色
 */
function changeColor(index,currentColor,othersColor){

    //1 將所有的都變成白色
    var lis=document.getElementsByClassName("jrli");
    for(var i=0;i<lis.length;i++){
        var tem=lis[i];
        tem.style.background=othersColor;
    }

    //2 將當前的變成currentColor
    lis[index].style.background=currentColor;
}

到目前為止，我們的滾動視圖基本封裝完成，而且簡單易使用。另外由於篇幅問題，先給大家分享到這里，大家也可以繼續完善一下自己的代碼。后續還會有更多的分享給大家，敬請期待。

 

 

 

作者：傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
版權聲明：本文版權歸煙 台 傑瑞教育 科 技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
技術咨詢：