垂直内容滑块 - JQuery答案

【问题标题】：Vertical content slider - JQuery垂直内容滑块 - JQuery
【发布时间】：2017-06-23 05:49:41
【问题描述】：

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

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

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

.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;
}

<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>

【问题讨论】：

您将滚动附加到错误的元素。如果你想在滑块包装器上滚动，那么滑块包装器应该有溢出：滚动而不是溢出：隐藏
你试过$(window).scroll(function(){rotateImages();});
@karthick 如果我将其更改为 overflow:scroll 然后会出现滚动，这是我不想要的。
@locateganesh 是的，我也尝试过window.scroll，但没有运气

标签： javascript jquery html css slider

【解决方案1】：

我建议使用jquery-mousewheel，因为除非有滚动条，否则scroll 事件将不起作用。

Fiddle demo

$('.slider-wrapper').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
    rotateImages();
});

【讨论】：

感谢您的回答，我想现在我可以实现我想要的了。