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

yanest 發布于2019-08-01 15:03 / 854人閱讀

摘要：的代碼代碼代碼定義每次滑動的距離定義當前滑動的索引位置，輪播圖的個數向左滑動執行的方法當輪播圖滑動最后一個位置時，當前輪播圖位置不變當輪播不在最后一個位置時，輪播圖位置變化方法向右滑動

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){
        //當輪播圖在第一個位置時
        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
代碼有缺陷，其中touchstart函數中點擊開始的X坐標pressX不用全局變量該怎么表示？還有int這樣的一個全局變量，沒有解決好，有大神可以指正下。
展示效果圖

GPU云服務器云服務器滑動輪播 jquery滑動輪播 js圖片自動輪播 js多張圖片滾動輪播

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49735.html

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

摘要：的代碼代碼代碼定義每次滑動的距離定義當前滑動的索引位置，輪播圖的個數向左滑動執行的方法當輪播圖滑動最后一個位置時，當前輪播圖位置不變當輪播不在最后一個位置時，輪播圖位置變化方法向右滑動 Html的代碼： ...

rose 2019-08-19 17:38 評論0 收藏0
用jq實現移動端滑動輪播以及定時輪播效果

摘要：的代碼代碼代碼定義每次滑動的距離定義當前滑動的索引位置，輪播圖的個數向左滑動執行的方法當輪播圖滑動最后一個位置時，當前輪播圖位置不變當輪播不在最后一個位置時，輪播圖位置變化方法向右滑動 Html的代碼： ...

qylost 2019-08-30 12:46 評論0 收藏0
干貨--手把手擼vue移動UI框架：滑動輪播

摘要：其次父組件中負責通用的功能，以及輪播的整體架構，其結構如下。下面的是一種移動端的適配方案。接下來實現函數運用動畫切換到指定下標的子項到此為止，咱們就已經完成了一個初步的滑動切換輪播圖的功能了。前言昨天寫了一篇側邊菜單組件的文章，閱讀人數挺多的，內心很欣喜（偷著樂，第一篇文章有這么多人看）！乘著這股勁，今天在繼續寫一篇我們平時工作中更常用的滑動輪播組件的文章。效果展示老規矩，咱們...

MSchumi 2019-08-22 15:12 評論0 收藏0
回顧自己三次失敗的面試經歷

摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

DC_er 2019-08-21 17:42 評論0 收藏0