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这样的一个全局变量，没有解决好，有大神可以指正下。

展示效果图