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

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

  •  
  •   moonshow · 2019-05-26 12:14:41 +08:00 · 2501 次点击
    这是一个创建于 2033 天前的主题,其中的信息可能已经有所发展或是发生改变。

    下面是我找的 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
    moonshow
        1
    moonshow  
    OP
       2019-05-26 14:02:06 +08:00
    自顶,刚学完 html+css 开始学 js 感觉好难呀,大家有什么推荐的视频课程?
    phxsuns
        2
    phxsuns  
       2019-05-26 15:18:38 +08:00
    感觉这个插件的交互设计的有点问题。
    如果是最后几张的话,不应该整体向前移动的。
    moonshow
        3
    moonshow  
    OP
       2019-05-26 15:28:33 +08:00
    @phxsuns 我也觉得怪怪的,但是又找不出来原因在哪?刚开始学习 js,能帮忙研究下吗兄弟?
    lzxgh621
        4
    lzxgh621  
       2019-05-26 15:33:34 +08:00 via Android
    无限循环体验不好
    看看别的样式的 demo 吧
    lzxgh621
        5
    lzxgh621  
       2019-05-26 15:34:58 +08:00 via Android   ❤️ 1
    还有 你那确定不是最后一张图而是第一张?
    moonshow
        6
    moonshow  
    OP
       2019-05-26 15:43:06 +08:00
    @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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1100 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:46 · PVG 02:46 · LAX 10:46 · JFK 13:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.