2017-06-23 261 views
0

我想創建垂直內容滑塊使用jQuery,我試過創建,但它不工作。我試圖在滾動上更改幻燈片,不需要任何導航,只有內容必須在滾動上更改。垂直內容滑塊 - jQuery

Here is the JSfiddle of my code

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 { 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 500px; 
 
\t background: #dedede; 
 
\t border: 1px solid #ccc; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
} 
 
.slide-item { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
.item-one { 
 
\t top: 0; 
 
} 
 
.item-two { 
 
\t top: 100% 
 
} 
 
.slide-item > .img-block { 
 
\t float: left; 
 
\t width: 30%; 
 
} 
 
.slide-item > .img-block > img { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
.slide-item > .content-block { 
 
\t float: right; 
 
\t width: 70%; 
 
\t padding: 0 20px; 
 
\t 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>

+0

要附加滾動到錯誤的元素。如果你想滾動滑塊包裝,那麼滑塊包裝應該有溢出:滾動不溢出:隱藏 – karthick

+0

你試過'$(window).scroll(function(){rotateImages();});' – locateganesh

+0

@karthick if我改變溢出:滾動然後滾動會出現,我不想要。 –

回答

1

我會建議使用jquery-mousewheel因爲scroll事件之前,不會,除非有滾動條的工作。

Fiddle demo

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

感謝您的答案,我想現在我可以實現我在找什麼。 –