js 自適應手機電腦 輪播圖

本身寫了一個javascript的可循環輪播圖，支持手機滑動，不過代碼着實小白，全局變量，函數調用滿天飛，研究別的代碼規範好的輪播圖插件，表示看得懂可是寫不出。。

HTML：

<div id="main" >
    <!--輪播圖片或背景-->
    <div class="bigbox">
        <ul id="listCont">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
       </ul>
    </div>
</div>
<!--頁數按鈕-->
<div id="pageBtn">
    <a class="active">one</a>
    <a >two</a>
    <a >three</a>
    <a >four</a>
    <a >five</a>
</div>
<!--先後按鈕-->
<div id="pnBtn">
    <a class="prev" > < <span></span></a>
    <a class="next" > > <span></span></a>
</div>

 

JS：

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
 }, false);
//touchstart事件
function touchstartFunc(evt) {
    try {
        //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
        var touch = evt.touches[0]; //獲取第一個觸點
        var x = Number(touch.pageX); //頁面觸點X座標
         var y = Number(touch.pageY); //頁面觸點Y座標
         //記錄觸點初始位置
        startX = x;
        startY = y;
    } catch (e) {
        alert('touchstartFunc：' + e.message);
    }
}

//touchmove事件，這個事件沒法獲取座標
function touchMoveFunc(evt) {
    //touchstartFunc(evt);
    try {
         //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
        var touch = evt.touches[0]; //獲取第一個觸點
        var x = Number(touch.pageX); //頁面觸點X座標
        var y = Number(touch.pageY); //頁面觸點Y座標
        //document.getElementById("main").innerHTML = "原:"+startY+" "+"現:"+y;
        //判斷滑動方向
        if (x - startX > 50) {
            swipeRight();
           //alert("向右劃");
        } else if(x - startX < -50){
            swipeLeft();
       }
    } catch (e) {
        alert('touchMoveFunc：' + e.message);
    }
}

//touchend事件
function touchEndFunc(evt) {
    try {
        //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
    } catch (e) {
        alert('touchEndFunc：' + e.message);
    }
}

document.getElementById("main").addEventListener('touchstart', touchstartFunc, false);
document.getElementById("main").addEventListener('touchmove', touchMoveFunc, false);
document.getElementById("main").addEventListener('touchend', touchEndFunc, false);

//頁數按鈕
var pageBtn = document.getElementById("pageBtn");
var pageList = document.getElementById("pageBtn").getElementsByTagName("a");

//先後按鈕
var pnBtn = document.getElementById("pnBtn");
var pnList = document.getElementById("pnBtn").getElementsByTagName("a");
var prev = getByClass("prev","a",pnBtn);
var next = getByClass("next","a",pnBtn);

//輪播內容
var main = document.getElementById("main");//main content
var list = document.getElementById("main").getElementsByTagName('li');
var listCont = document.getElementById("listCont");//輪播列表
del_ff(listCont);
var count = list.length;
var listWidth = main.offsetWidth;
listCont.style.marginLeft = -listWidth + "px";

//將first子元素複製到列表尾，last複製到列表頭
var f = listCont.firstChild.cloneNode(true);
var l = listCont.lastChild.cloneNode(true);
listCont.appendChild(f);
listCont.insertBefore(l,listCont.firstChild);

// main.addClass("trans");
main.className = "trans";
var time = setInterval("turn(-2)",5000);

//getElementsByClass
function getByClass(classname, tagname, parent){
    var result=[],
   _array=parent.getElementsByTagName(tagname);
    for(var i=0,j=_array.length;i<j;i++){
        if((new RegExp("(?:^|\\s+)"+classname+"(?:\\s+|$)")).test(_array[i].className)){
            result.push(_array[i]);
        }
    }
    return result;
}

//解決FF和chrome下把換行也看成子元素的bug
function del_ff(elem){
    var elem_child = elem.childNodes;
    for(var i=0; i<elem_child.length;i++){
        if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)) {
            elem.removeChild(elem_child[i]);
        }
    }
}

//自適應寬度
for(var i=0;i<list.length;i++){
    list[i].index = i;
    list[i].style.width = listWidth+'px';
}

//turn
var timer = null;
function turn(dir){

    var flag = Math.abs(parseInt(listCont.style.marginLeft))/main.offsetWidth;

    if(dir == -1){ //前一張
        if(flag == 0){//flag = 0,在第一張而且要到前一張
            var tim = null;
            flag = list.length-3;
            listCont.className = "";
            tim = setTimeout(function(){
                listCont.style.marginLeft = -(flag+1)*listWidth + "px";
            },0)
        }else if(flag>0){
            flag--;
            }
       }else if(dir == -2){ //後一張
           if (flag < list.length-1 ) {
           flag++;
       }else{
           var tim = null;
           flag = 2;
           listCont.className = "";
           tim = setTimeout(function(){
               listCont.style.marginLeft = -listWidth + "px";
           },0)
        }
    }else{
         flag = dir;
}

clearTimeout(timer);
timer = setTimeout(function(){
    listCont.className = "trans";
    listCont.style.marginLeft = -flag*listWidth + "px";
},100)

//按鈕激活
for(var i=0 ;i<pageList.length;i++){
    var index = flag;
    pageList[i].className=" ";
    if(index == 0) index = 5;
    else if(index == 6) index = 1;
    pageList[index-1].className="active";
}


}//turn end

//點擊按鈕翻頁
for(var i=0 ;i<pageList.length;i++){
    pageList[i].index = i+1;
    pageList[i].onclick = function(){
        clearInterval(time);
        turn(this.index);
        time = setInterval("turn(-2)",5000);
    }
}

//先後按鈕翻頁
prev[0].onclick = function(){
    swipeRight();
}
next[0].onclick = function(){
    swipeLeft();
}

//右劃 == 前一張 function swipeRight(){    clearInterval(time);    var dir = -1;    turn(dir);     time = setInterval("turn(-2)",5000); } //左劃 == 下一張 function swipeLeft(){    clearInterval(time);    var dir = -2;    turn(dir);     time = setInterval("turn(-2)",5000); }