jquery - 在不同的方向动画div

时间:2016-05-11 17:03:39

标签: javascript jquery html css

我试图制作像THIS这样的网站 我的背景滑块仍然不太好。它仍然在活动幻灯片的右边添加另一张幻灯片并转为宽度 和div滑动在顶部没有变成另一个div, 我是javascript中的新手

    $(document).ready(function() {

  function do_slide() {
    interval = setInterval(function() {
      moveRight();
    }, 6000);
  }
  do_slide();
  $('.child img').hover(function() {
    clearInterval(interval);
  });
  $('.child img').mouseleave(function() {
    do_slide();
  });

  var slideCount = $('#main_slide .child img').length;
  var slideWidth = $('#main_slide .child img').width();
  var slideHeight = $('#main_slide .child img').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('#main_slide').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#main_slide .child').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

  $('#main_slide .child img:last-child').prependTo('#main_slide .child');

  //                Slide Background
  function moveRight() {
    $('#main_slide .child').animate({
      left: -slideWidth
    }, 700, function() {
      $('#main_slide .child img:first-child').appendTo('#main_slide .child');
      $('#main_slide .child').css('left', '');
    });
    $('#slide_content .child').animate({
      left: "300px"
    }, 700, function() {
      $('#slide_content .child div:first-child').appendTo('#slide_content .child');
      $('#slide_content .child').css('left', '');
    });
  };

});

完整的代码 FIDDLE HERE

1 个答案:

答案 0 :(得分:0)

  $('#slide_content .child').animate({
                  left: "200px"
                });

尝试"左:200px"或任何价值而不是"对"。它会工作..肯定是因为背景滑块的宽度很大。修复滑块,一切都应该正常工作