我目前正在忙于自制的JQuery滑块。对于客户,我想根据网页上的位置更改每张幻灯片。当我在第一个场景上,然后单击下一步时,我想显示第二个场景,依此类推。当我在Sixt场景上时,我想回到第一个场景。
我尝试了几件事,但是以某种方式找不到解决方案。希望你们能指出正确的方向。
<div id="-scene-wrapper">
<a href="#" class="previous"><h2>Back</h2></a>
<a href="#" class="next"><h2>Next</h2></a>
<div id="scene1" class="scenes">
<h2>Scene 1</h2>
</div>
<div id="scene2" class="scenes">
<h2>Scene 2</h2>
</div>
<div id="scene3" class="scenes">
<h2>Scene 3</h2>
</div>
<div id="scene4" class="scenes">
<h2>Scene 4</h2>
</div>
<div id="scene5" class="scenes">
<h2>Scene 5</h2>
</div>
<div id="scene6" class="scenes">
<h2>Scene 6</h2>
</div>
</div>
$(window).scroll(function () {
$(".scenes").each(function (index) {
$.fn.isInViewport = function () {
var ScrollTop = $(window).scrollTop();
console.log(ScrollTop);
};
$('.next').click(function(event){
event.preventDefault();
console.log(index);
//Magic code
})
$('.previous').click(function(event){
event.preventDefault();
console.log(index);
//Magic code
})
});
});
根据以上HTML代码,我解决了该问题!很想听听您对此解决方案的意见。
解决方法如下:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句