Question

当我在浏览器中运行时，起初没有任何复杂情况。

最终滑块开始动画到未被图像占据的空间。我已经乱搞了几次，但要么不重启周期，要么进入深渊。

jQuery(document).ready(function() {
  $('#slide').css("top", "0px");
  var slilen = parseInt($('#slide').css("height"), 10);
  $('.music').html(slilen);
  var slito = parseInt($('#slide').css("top"), 10) / -1;
  $('.comingsoon').html(slito);
  var slial = slilen - 500;
  $('.about').html(slial);
  function setoot() {
    setInterval(function() {
      checx()
    }, 5000);
  }
  setoot();

  function blabo() {
    $('#slide').animate({
      top: "-=500",
    }, 3000, function() {
      $('.comingsoon').html(slito);
      slito = parseInt($('#slide').css("top"), 10) / -1;
      $('.contact').html($('#slide').css("top"));
    });
  }

  function checx() {
    if (slito + 500 !== slial) {
      if (slito > slial) {
        $('#slide').css("top", "0");
        slito = parseInt($('#slide').css("top"), 10) / -1;
      } else if (slito < slial) {
        blabo();
      }
    } else if (slito + 500 == slial) {
      if (slito < slial) {
        $('#slide').animate({
          top: "0",
        }, 5000, function() {
          $('#slide').css("top", "0px");
          return 0;
        });
        slito = parseInt($('#slide').css("top"), 10) / -1;
        setoot();
      }
    } else {
      $('#slide').animate({
        top: "0",
      }, 5000, function() {
        $('#slide').css("top", "0px");
        return 0;
      });
      slito = parseInt($('#slide').css("top"), 10) / -1;
      setoot();
    }
  }
});

    #pic {
      width: 100vw;
      height: 31.250em;
      background-color: Chartreuse;
      overflow: hidden;
    }
    #t {
      position: relative;
      overflow: hidden;
    }
    #sli {
      height: 1500px;
      overflow: hidden;
    }
    #slide {
      height: 93.750em;
      position: relative;
      overflow: hidden;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pic">
  <div id="slide">
    <img src="im.jpg" style="margin-bottom: -4px; width: 100%;  height: 500px; background-color: blue;">
    <img src="im2.jpg" style="margin-bottom: -4px; width: 100%;  height: 500px; background-color: red;">
    <img src="im3.jpg" style="margin-bottom: -4px; width: 100%;  height: 500px; background-color: DarkGoldenRod;">
  </div>
</div>

Answer 1

让自己避免头痛。

http://kenwheeler.github.io/slick/

如果您真的对修复代码感兴趣，我会提供一个小提示，我们可以看一下这个问题。

Answer 2

本教程可能有所帮助： https://www.youtube.com/watch?v=KkzVFB3Ba_o

$(function() {

//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();

}）;

来源：http://jsfiddle.net/EjZzs/15/

jQuery图像滑块不起作用

2 个答案: