Question

我的幻灯片显示效果非常好，但每个“下一个”或“上一个”整个页面都在跳跃。这很烦人，特别是在较低分辨率和移动设备上。这是幻灯片：http://www.edelsteine-wimmer.at 谢谢您的帮助！：）

代码：

var Eva = Eva || {};

function set_testimonial_page(page) {

  Eva.testimonial_page = page;
  $('.testimonial').hide();
  $('.testimonial').removeClass('active');
  $('#testimonial' + page).fadeIn(500);
  $('#testimonial' + page).addClass('active');
  $('#testimonial-count').html(page + ' von ' + $('.testimonial').length);

}

$(document).ready(function() {

  // testimonials

  var testimonials = $('.testimonial').length;
  set_testimonial_page(1 + Math.floor(Math.random() * testimonials));
  $('#testimonial-prev').click(function(event) {

      //event.preventDefault();

      Eva.testimonial_page--;
      if (Eva.testimonial_page < 1) Eva.testimonial_page = testimonials;
      set_testimonial_page(Eva.testimonial_page);

  });

  $('blockquote, #testimonial-next , #testimonial- count').click(function(event) {

      //event.preventDefault();
      Eva.testimonial_page++;
      if (Eva.testimonial_page > testimonials) Eva.testimonial_page = 1;
      set_testimonial_page(Eva.testimonial_page);

  });

});

Answer 1

您需要更改HTML。您提供的链接有两个箭头，其中href到#。这使页面转到第一个元素。由于您只想显示推荐，而不是：

<li class="testimonial-arrow first">
  <a id="testimonial-prev" href="#">«</a>
</li>

将href修改为：

<li class="testimonial-arrow first">
  <a id="testimonial-prev" href="#thankyous">«</a>
</li>

对两个箭头执行此操作，单击箭头时页面会保留在推荐书上。

幻灯片跳跃在上面

1 个答案: