javascript - 如何在使用 jquery mobile 加载的每个页面上执行相同的 javascript 函数
问题描述
我需要帮助来整理这段代码,目标是加载每个页面以显示数组图像 3 秒。
第一页工作正常。问题是在第一个页面之后加载的每个页面的图像变化更快。
<div data-role="page" id="page1" class="banners">
<div data-role="main" class="ui-content">
<div class="patrocinadores" align="center">
<img src="" width="100%" class="bannerPatrocinador">
</div>
</div>
</div>
<div data-role="page" id="page2" class="banners">
<div data-role="main" class="ui-content">
<div class="patrocinadores" align="center">
<img src="" width="100%" class="bannerPatrocinador">
</div>
</div>
</div>
<div data-role="page" id="page3" class="banners">
<div data-role="main" class="ui-content">
<div class="patrocinadores" align="center">
<img src="" width="100%" class="bannerPatrocinador">
</div>
</div>
</div>
<script>
$('.banners').on("pagecreate",function(event){
clearInterval(trocarImagem);
let cmpBanner1 = localStorage.getItem("cmpBanner1");
let cmpBanner2 = localStorage.getItem("cmpBanner2");
let cmpBanner3 = localStorage.getItem("cmpBanner3");
let cmpLink1 = localStorage.getItem("cmpLink1");
let cmpLink2 = localStorage.getItem("cmpLink2");
let cmpLink3 = localStorage.getItem("cmpLink3");
let imagens = ["adm/img/mkt/"+cmpBanner1, "adm/img/mkt/"+cmpBanner2+"", "adm/img/mkt/"+cmpBanner3+""];
let imagemAtual = 0;
function trocarImagem(){
imagemAtual = (imagemAtual + 1) % 3;
var teste = $('.bannerPatrocinador').attr('src',imagens[imagemAtual]);
}
setInterval(trocarImagem, 3000);
});
</script>
解决方案
您的代码中有几个问题:
- clearInterval 应该接受 setInterval 作为变量,而不是您通过 setInterval 调用的函数
- $('.bannerPatrocinador').attr('src', IMAGE); - 这会将图像添加到每个bannerPatrocinador img 框,而不仅仅是在活动页面上
- 在 jquery Mobile 应用程序中重用相同的类名并不明智,因为所有内容都加载到 DOM 中,因此您很有可能同时访问多个项目。
- 忘记 jQuery Mobile,它已经死了,再多的死灵法也不会让它起死回生
工作示例:http: //jsfiddle.net/ws5p6nbk/
var interval;
var imagemAtual = 0;
function trocarImagem() {
var imagens = ["https://s3.amazonaws.com/wmfeimages/wp-content/uploads/2018/09/27182802/4189366235_060e3e8e6f_z.jpg", "https://media.mnn.com/assets/images/2019/02/lexi.JPG.653x0_q80_crop-smart.jpg", "https://assets3.thrillist.com/v1/image/2709211/size/tmg-article_tall.jpg"];
console.log(imagemAtual);
imagemAtual = (imagemAtual + 1) % 3;
var activePage = $.mobile.activePage;
activePage.find('.bannerPatrocinador').attr('src', imagens[imagemAtual]);
}
$(document).on("pagecreate", '.banners', function(event) {
clearInterval(interval);
interval = setInterval(trocarImagem, 3000);
});
如果您满意,请测试这些更改并接受答案。
推荐阅读
- c++ - 有没有办法解析 CMakeFiles.txt 中的包含路径?
- python - 在 Python 中不使用 hex 函数将 Dec 转换为 Hex
- python - 根据两个数字之和从输出中删除重复项
- javascript - 名称是必需的 Nodejs API
- sql - 确保只有表中的现有用户可以在 PostgreSQL 中添加记录
- javascript - 如何为我的网页制作标题 [HTML5 , CSS3]
- javascript - 无需在 javascript 中四舍五入即可获得短关注者数量
- constants - 如何使用 laravel 将常量的值写入另一个变量
- rust - 无法推断异步方法的生命周期
- firebase - 需要更改包名吗?