Question

请查看以下代码：

// function scroller() {
//   $('.product:first-child').appendTo(".products-inner"); 
//  $(".products-inner").css("left","0");
//  $(".products-inner").animate({left:"-289px"},2000, "linear");
//  setTimeout("scroller()",2012); 
// };


// scroller();

// $(".prev").click(function() {
//   $('.feed-item:last-child').prependTo(".news-feed-inner"); 
//  $(".news-feed-inner").css({"top":"-150px"});
//  $(".news-feed-inner").animate({top:"0"},500);
// });

// $(".next").click(function() {
//   $('.feed-item:first-child').appendTo(".news-feed-inner"); 
//  $(".news-feed-inner").css("top","0");
//  $(".news-feed-inner").animate({top:"-150px"},500);
// });


var vox_news = 0;

$('.voxNews li').each(function() {
    vox_news += $(this).outerWidth( true );
});

$('.voxNews').parent().append($('.voxNews').clone());
  function setupNews(w) {
      function phase1() {
          var voxNews = $('.voxNews').first(),
              curMargin = voxNews.css('margin-left').replace("px", ""),
              animSpeed = (w*20) - (Math.abs(curMargin)*20);

          voxNews.animate({'margin-left' : '-' + w + 'px'}, animSpeed, 'linear', phase2);
      }
      function phase2() {
          $('.voxNews').first().css({'margin-left' : '0px'});
           phase1();
      }
      $('.voxNews img').hover(function() {
          $('.voxNews').stop();
      }, function() {
          phase1();
      });
      phase1();
  }

setupNews(vox_news);

#news_slide{
height:150px; 
overflow:hidden;
}
.voxNews li{
margin-top:-10px;
float:left;
margin-left:5px;
padding:15px 0 5px;
}

* {
  margin: 0;
  padding: 0;
}

.products-outer {
  width: 80%;
  margin: 50px auto 0;
  border: 1px solid #444;
  padding: 20px;
  overflow: hidden;
}

.products-inner {
/*   width: 1156px; */
  position: relative;
/*   left: 0px; */
/*   transition: all; */
}
.product {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="news_slide" class="products-outer">
<ul class="voxNews products-inner">
<li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-1.png" alt=""></li>
<li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-2.png" alt=""></li>
<li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-3.png" alt=""></li>
  <li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-4.png" alt=""></li>
  <li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-5.png" alt=""></li>
<li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-6.png" alt=""></li>
<li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-7.png" alt=""></li>
  <li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-8.png" alt=""></li>
  <li><img src="https://s3-eu-west-1.amazonaws.com/hnie-assets/Promotion+Pages/100+Gifts+of+Christmas/images/product-9.png" alt=""></li>
</ul>
</div>

<div class="controls">
  <button class="prev">Scroll Left</button>
  <button class="next">Scroll Right</button>
</div>

代码笔：https://codepen.io/Paul34/pen/gxNKqe

此动画仅支持向前方向。

我想从两个方向（向前，向后）完成此代码。

感谢您的帮助。

Answer 1

这应该可行。我创建了一个反向变量来处理运动时使用-或+。

将此添加到CSS：

ul{
  float:left;
  width: 5000px;
}

还有JS：

var vox_news = 0;

$('.voxNews li').each(function() {
    vox_news += $(this).outerWidth(true);
});

$('.voxNews').parent().append($('.voxNews').clone());

function setupNews(w, reverse) {
    function phase1() {
        var voxNews = $('.voxNews').first(),
            curMargin = voxNews.css('left').replace("px", ""),
            animSpeed = (w * 20) - (Math.abs(curMargin) * 20);

      if(reverse){
          voxNews.stop().animate({
              'left': w + 'px'
          }, animSpeed, 'linear', phase2);
        }else{
          voxNews.stop().animate({
              'left': '-' + w + 'px'
          }, animSpeed, 'linear', phase2);
        }
    }

    function phase2() {
        
    }
    $('.voxNews img').hover(function() {
        
    }, function() {
        phase1();
    });
    phase1();
}

setupNews(vox_news,false);

$('.prev').on('click',function(){
  setupNews(vox_news,false);
  
});
$('.next').on('click',function(){
  setupNews(vox_news,true);
  
});

jQuery轮播自动播放动画

1 个答案: