html - 遍历 Jquery 循环中的每个属性
问题描述
我目前正忙于自制的 JQuery 滑块。对于客户,我想根据网页上的位置更改每张幻灯片。当我在第一个场景时,然后单击下一步,我想显示第二个场景,依此类推。当我在第六个场景时,我想回到第一个场景。
我尝试了几件事,但不知何故我找不到解决方案。希望你们能指出我正确的方向。
<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代码,我解决了这个问题!很想听听您对此解决方案的意见。
这是解决方案:
推荐阅读
- java - 使用 java 语言构建 AWS-CDK 的错误
- java - MongoDB java和更新值
- python-3.x - 在 Python 中解析 Excel 单元格
- ios - Swift/iOS - Firebase 远程配置在 App Delegate 中获取值
- reactjs - 如何解决反应原生组件中的内存泄漏问题?
- android - 使用数据类对象在房间数据库中插入数据
- proxy - 代理错误任何软件包尚未下载?
- reactjs - 添加依赖项时 useEffect 无限循环
- clojure - Ring clojure 库是否可以与 clojurescript 一起使用
- java - 如何使用`Files.walk`和提前终止