用jq实现移动端滑动轮播以及定时轮播效果

rose 发布于2019-08-19 17:38 / 1334人阅读

摘要：的代码代码代码定义每次滑动的距离定义当前滑动的索引位置，轮播图的个数向左滑动执行的方法当轮播图滑动最后一个位置时，当前轮播图位置不变当轮播不在最后一个位置时，轮播图位置变化方法向右滑动

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多张图片滚动轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78727.html

用jq实现移动端滑动轮播以及定时轮播效果

摘要：的代码代码代码定义每次滑动的距离定义当前滑动的索引位置，轮播图的个数向左滑动执行的方法当轮播图滑动最后一个位置时，当前轮播图位置不变当轮播不在最后一个位置时，轮播图位置变化方法向右滑动 Html的代码： ...

qylost 2019-08-30 12:46 评论0 收藏0
用jq实现移动端滑动轮播以及定时轮播效果

摘要：的代码代码代码定义每次滑动的距离定义当前滑动的索引位置，轮播图的个数向左滑动执行的方法当轮播图滑动最后一个位置时，当前轮播图位置不变当轮播不在最后一个位置时，轮播图位置变化方法向右滑动 Html的代码： ...

yanest 2019-08-01 15:03 评论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