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>
要附加滾動到錯誤的元素。如果你想滾動滑塊包裝,那麼滑塊包裝應該有溢出:滾動不溢出:隱藏 – karthick
你試過'$(window).scroll(function(){rotateImages();});' – locateganesh
@karthick if我改變溢出:滾動然後滾動會出現,我不想要。 –