垂直内容滑块 - JQuery

Question

我正在尝试使用jQuery创建垂直内容滑块，我尝试过创建但它不起作用。我试图在滚动时更改幻灯片，不需要任何导航，只有内容必须在滚动时更改。

Here is the JSfiddle of my code

＆＃13;

＆＃13;

function rotateImages(){
  $(".slide-item").animate({top: "-100%"}, 1000).delay(4000);
  $(".slide-item").animate({top: "200%"}, 1000).delay(4000);
}

$(".slider-wrapper").scroll(function() {
    rotateImages();
});

＆＃13;

.slider-wrapper {
	float: left;
	width: 100%;
	height: 500px;
	background: #dedede;
	border: 1px solid #ccc;
	overflow: hidden;
	position: relative;
}
.slide-item {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.item-one {
	top: 0;
}
.item-two {
	top: 100%
}
.slide-item > .img-block {
	float: left;
	width: 30%;
}
.slide-item > .img-block > img {
	width: 100%;
	height: auto;
}
.slide-item > .content-block {
	float: right;
	width: 70%;
	padding: 0 20px;
	box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slider-wrapper">
  <div class="slide-item item-one">
    <div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
    <div class="content-block">
      <h1>Slider Heading 1</h1>
      <p>This is content related to slider. This is content related to slider.  This is content related to slider. This is content related to slider. </p>
    </div>
  </div>
  <div class="slide-item item-two">
    <div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
    <div class="content-block">
      <h1>Slider Heading 1</h1>
      <p>This is content related to slider. This is content related to slider.  This is content related to slider. This is content related to slider. </p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我建议使用jquery-mousewheel，因为除非有滚动条，否则$('.slider-wrapper').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); rotateImages(); }); 事件将无效。

Fiddle demo

{{1}}