首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  前端开发

JS 轮播缩略图位置如何调整?

  •  
  •   moonshow · 140 天前 · 720 次点击
    这是一个创建于 140 天前的主题,其中的信息可能已经有所发展或是发生改变。

    下面是我找的 JS 轮播图插件,点左箭头滑动到第一张缩略图时,后面是空白的,如何让它循环起来呢,应该如何解决?前端新手,请指教,感激不尽

    以下是代码:

    
      var thumbNum=$("#ProductThumbs .Product_Thumbs").length;
      var thumbActive=$("#ProductThumbs .active-thumb").parent("li").index();
      $("#ProductThumbs").css('width', thumbNum * 90 + 'px');
      $("#ProductThumbs").css('left',  '-' + thumbActive * 0 + 'px');
      $('body').on('click', '#prev_btn2', function () {
        if(thumbActive<thumbnum-1){ $("#productthumbs").css('left',="" '0px');="" (thumbactive="" if="" thumbactive="0;" thumbactive++;="" }="" }else{=""> 4) {
          $("#ProductThumbs").css('left',  '-' + (thumbActive - 4) * 90 + 'px');
        }
        $("#ProductThumbs .Product_Thumbs").eq(thumbActive).find(".product-single__thumb").click();
      });
      $('body').on('click', '#prev_btn1', function () {
        if(thumbActive>0){
          thumbActive--;
        }else{
          thumbActive=thumbNum-1;
        }
        if (thumbActive === 0) {
          $("#ProductThumbs").css('left',  '0px');
        } else {
          $("#ProductThumbs").css('left',  '-' + thumbActive * 90 + 'px');
        }
        $("#ProductThumbs .Product_Thumbs").eq(thumbActive).find(".product-single__thumb").click();
      });
    });</thumbnum-1){>
    6 回复  |  直到 2019-05-26 15:43:06 +08:00
        1
    moonshow   140 天前
    自顶,刚学完 html+css 开始学 js 感觉好难呀,大家有什么推荐的视频课程?
        2
    phxsuns   140 天前
    感觉这个插件的交互设计的有点问题。
    如果是最后几张的话,不应该整体向前移动的。
        3
    moonshow   140 天前
    @phxsuns 我也觉得怪怪的,但是又找不出来原因在哪?刚开始学习 js,能帮忙研究下吗兄弟?
        4
    lzxgh621   140 天前 via Android
    无限循环体验不好
    看看别的样式的 demo 吧
        5
    lzxgh621   140 天前 via Android   ♥ 1
    还有 你那确定不是最后一张图而是第一张?
        6
    moonshow   140 天前
    @lzxgh621 感谢回复,右侧箭头是正常的,<img src="https://s2.ax1x.com/2019/05/26/VEgxnU.gif">
    应该是最后一张图,
    你可以打开网址看下 https://www.coolestsale.com/collections/wireless-charger/products/captain-america-superman-wireless-charger
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   816 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 27ms · UTC 20:25 · PVG 04:25 · LAX 13:25 · JFK 16:25
    ♥ Do have faith in what you're doing.