用jq實現移動端滑動輪播以及定時輪播效果

Html的代碼：

<div class="carousel_img">
    <div class="car_img" style="background:url(files/DocMatchImg_1.png) no-repeat;background-size:cover;background-position:center;">
    </div>
    <div class="car_img" style="background:url(files/DocMatchImg_2.png) no-repeat;background-size:cover;background-position:center;">
    </div>
    <div class="car_img" style="background:url(files/DocMatchImg_1.png) no-repeat;background-size:cover;background-position:center;">
    </div>
    <div class="car_img" style="background:url(files/DocMatchImg_2.png) no-repeat;background-size:cover;background-position:center;">
    </div>
    <div class="car_img" style="background:url(files/DocMatchImg_2.png) no-repeat;background-size:cover;background-position:center;">
    </div>
    
    <div class="carousel_index">
        <div class="carousel_icon carousel_icon1"></div>
        <div class="carousel_icon carousel_icon2"></div>
        <div class="carousel_icon carousel_icon2"></div>
        <div class="carousel_icon carousel_icon2"></div>
        <div class="carousel_icon carousel_icon2"></div>
    </div>
</div>

css代碼：

.carousel_img{width:100%;position:relative;top:0;left:0;overflow:hidden;height:200px;}
.car_img{width:100%;height:200px;position:absolute;top:0;left:0;}
.carousel_index{position:absolute;top:180px;right:0;padding-right:24px;height:12px;}
.carousel_icon{width:12px;height:12px;float:left;}
.carousel_icon1{background:url(../image/DovmatchWhite.png) no-repeat;background-size:8px;background-position:center center;}
.carousel_icon2{background:url(../image/DovmatchGrey.png) no-repeat;background-size:8px;background-position:center center;}

jq代碼：

$(document).ready(function(e) {
    var imgObj = document.getElementsByClassName("car_img");
    var imgLen = imgObj.length;
    var windowWidth = $(window).width();
    $(".car_img").bind("click",function(event){
        
    });
    int = setInterval(carouselImg,3000);
    for(var i=0;i<imgLen;i++){
        $(".car_img").eq(i).css({"top":"0","left":i*windowWidth});
        imgObj[i].addEventListener('touchstart',touchstart,false);
        imgObj[i].addEventListener('touchmove',touchmove,false);
        imgObj[i].addEventListener('touchend',touchend,false);
    }
    
});

function touchstart(event){
    event.preventDefault();
    if( event.targetTouches.length == 1 )
    {
        clearInterval(int);
        var touch = event.targetTouches[0];
        pressX = touch.pageX;
    }
}

/*
 *定義每次滑動的距離spanX
 *定義當前滑動的索引位置thisIndex，輪播圖的個數imgLen
 */
function touchmove(event){
    event.preventDefault();
    
    if( event.targetTouches.length == 1 )
    {
        var touch = event.targetTouches[0];
        var spanX = touch.pageX - pressX ,
            windowWidth = $(window).width();
        var $car_img = $(".car_img"),
            $this = $(this);
        var thisIndex = $this.index(),
            imgLen = $(".car_img").length;
        for(var i=0;i < imgLen;i++){
            $car_img.eq(i).css("left",windowWidth*(i-thisIndex)+spanX);
        }
        
    }
}

function touchend(event){
    var $car_img = $(".car_img"),
        $this = $(this),
        $carousel_icon = $(".carousel_icon"),
        windowWidth = $(window).width();
    var thisIndex = $this.index(),
        imgLen = $(".car_img").length;
    var thisLeft = parseInt($(this).css("left"));
    //向左滑動執行的方法
    if(thisLeft < -32 && thisIndex < imgLen){
        //當輪播圖滑動最後一個位置時，當前輪播圖位置不變
        if(thisIndex == imgLen-1){
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},300);
                
            }
        }
        //當輪播不在最後一個位置時，輪播圖位置變化方法
        else{
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-(thisIndex+1))},300);
                $carousel_icon.eq(i).addClass("carousel_icon2").removeClass("carousel_icon1");
            }
            $carousel_icon.eq(thisIndex+1).removeClass("carousel_icon2").addClass("carousel_icon1");
        }
        
    }
    //向右滑動執行的方法
    else if(thisLeft > 32 && thisIndex >= 0){
        //當輪播圖在第一個位置時
        if( thisIndex == 0){
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},300);
            }
        }
        //輪播圖不在第一個位置
        else{
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-(thisIndex-1))},300);
                $carousel_icon.eq(i).addClass("carousel_icon2").removeClass("carousel_icon1");
            }
            $carousel_icon.eq(thisIndex-1).removeClass("carousel_icon2").addClass("carousel_icon1");
        }
    }
    //當滑動距離在大於-32px而且小於32px時，當前輪播圖位置不變
    else{
        for(var i=0;i < imgLen;i++){
            $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},100);
        }
    }
    int = setInterval(carouselImg,3000);
}

function carouselImg(){
    var $car_img = $(".car_img"),
        $carousel_icon = $(".carousel_icon"),
        windowWidth = $(window).width();
    var imgLen = $car_img.length,
        imgZeroIndex = 0;
    for(var i=0;i<imgLen;i++){
        var everyImgLeft = parseInt($car_img.eq(i).css("left"));
        if(everyImgLeft == 0){
            imgZeroIndex = i;
            break;
        }    
        
    } 
    if(imgZeroIndex == imgLen-1){
        for(var i=0;i<imgLen;i++){
            $car_img.eq(i).animate({"left":windowWidth*i},300);
            $carousel_icon.eq(i).removeClass("carousel_icon1").addClass("carousel_icon2");
        }
        $carousel_icon.eq(0).removeClass("carousel_icon2").addClass("carousel_icon1");
    }
    else{
        for(var i=0;i<imgLen;i++){
            $car_img.eq(i).animate({"left":windowWidth*(i-(imgZeroIndex+1))},300);
            $carousel_icon.eq(i).removeClass("carousel_icon1").addClass("carousel_icon2");
        }
        $carousel_icon.eq(imgZeroIndex+1).removeClass("carousel_icon2").addClass("carousel_icon1");
    }
}

代碼有缺陷，其中touchstart函數中點擊開始的X座標pressX不用全局變量該怎麼表示？還有int這樣的一個全局變量，沒有解決好，有大神能夠指正下。

展現效果圖