用jq實(shí)現(xiàn)移動(dòng)端滑動(dòng)輪播以及定時(shí)輪播效果

rose 發(fā)布于2019-08-19 17:38 / 1337人閱讀

摘要：的代碼代碼代碼定義每次滑動(dòng)的距離定義當(dāng)前滑動(dòng)的索引位置，輪播圖的個(gè)數(shù)向左滑動(dòng)執(zhí)行的方法當(dāng)輪播圖滑動(dòng)最后一個(gè)位置時(shí)，當(dāng)前輪播圖位置不變當(dāng)輪播不在最后一個(gè)位置時(shí)，輪播圖位置變化方法向右滑動(dòng)

Html的代碼：

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 32 && thisIndex >= 0){
        //當(dāng)輪播圖在第一個(gè)位置時(shí)
        if( thisIndex == 0){
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},300);
            }
        }
        //輪播圖不在第一個(gè)位置
        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");
        }
    }
    //當(dāng)滑動(dòng)距離在大于-32px并且小于32px時(shí)，當(dāng)前輪播圖位置不變
    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
代碼有缺陷，其中touchstart函數(shù)中點(diǎn)擊開始的X坐標(biāo)pressX不用全局變量該怎么表示？還有int這樣的一個(gè)全局變量，沒有解決好，有大神可以指正下。
展示效果圖