评论：jquery仿QQ音乐精彩推荐的数组方式轮播  [查看原文]

居然要jqb

touchvoid0
2017/6/7 23:36:18
是啊

请问有人知道QQ音乐第一个轮播图点击左右按钮实现图片切换效果怎么实现吗？

°Distance0
2017/5/12 6:04:01
那个很简单啊，点击的时候改变ul的left值。

WJun0
2017/5/13 22:04:57

但是点击到最后一组图片跳转到第一组图片的时候，他会往右刷的一下到第一组，而不是继续往左很自然的到第一组，像官网那样，求大神破解。。。。

°Distance1
2017/5/14 6:33:33

我给你举个例子。比如有五组，12345，你布局的时候需要布局成  伪装的5  12345   伪装的1   也就是说首尾加各加一个伪装的  从5跳转到伪装的1，再把left的值改为1。同理，从1向左跳转到5的时候，是跳转到伪装的5，再改left的值。

°Distance1
2017/5/14 6:38:06

你仔细看他的left的值的变化没有，盒子是最后一个的时候，他跳转到第一个的时候，left的值改变了两次。先是匀速变到-6000，再瞬间变到-1200。第一个盒子往左跳转到最后一个盒子的时候，也是一样的道理，left的值先匀速变到0，再瞬间变到-4800。这种实现方式，说白了，就是一种假象。一般人看不出来而已。

°Distance1
2017/5/14 6:39:53

再不济，你看li个数啊，他那个每一组都是对应的4个li，四组本来是需要16个li实际上却有24个li。

WJun0
2017/5/14 22:48:57

多谢！

里面的span属性怎么修改了轮播图底下的颜色就变成了始终是红色，不会再随切换变成蓝色？？？？

°Distance0
2017/5/12 6:02:29

js文件里面也要对应的修改的。

不太好用，亏了

°Distance0
2017/5/12 6:05:14

哦？

只是数组操作那里还是有点不理解，晚上我在看看

°Distance0
2017/3/1 18:09:03

数组那里我当时也想了好久。画个图理解起来可能比较容易

那个，我写的QQ音乐官网的图片切换效果，我下载了你写的，改了一点，然后把它更新到页面中去了。最后那两句可以放到后面去

$carousel_btn.click(function () {
    var cur_index = $(this).index();
    var _num = cur_index - iNum;

    if (iNum === cur_index) {
      return;
    } else if (iNum < cur_index) {
      var newArr = carouselArr.splice(0, _num);

      carouselArr = $.merge(carouselArr, newArr);

      $carousel_item.each(function (i, elem) {
        $carousel_item.removeClass(carouselArr[i]);
        $(elem).addClass(carouselArr[i]);
      });
    } else {
      carouselArr.reverse();
      var newArr = carouselArr.splice(0, -_num);
      carouselArr = $.merge(carouselArr, newArr);
      carouselArr.reverse();

      $carousel_item.each(function (i, elem) {
        $carousel_item.removeClass(carouselArr[i]);
        $(elem).addClass(carouselArr[i]);
      });
    }

    // 在这里
    setBtn(cur_index);
    iNum = cur_index;
  });

°Distance0
2017/3/1 12:18:52

我最近也在做QQ音乐官网。