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);
}

 

转载于:https://www.cnblogs.com/jlliu/p/5318964.html