垂直内容滑块-JQuery

Question

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

这是我的代码的JSfiddle

 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> 

Answer 1

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

小提琴演示

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