【发布时间】:2017-01-28 02:16:37
【问题描述】:
我使用 Javascript 和 JQuery 创建了一个简单的图像滑块,该代码在本地和在线的 safari 中运行良好,但在 Chrome 中却没有运行。 Chrome 在控制台中也没有抛出任何错误,所以我发现很难查明确切的问题。我意识到已经阅读了这个问题,我可能应该让我的脚本反过来,所以slider.js先行,然后是Ajax,但是当我执行此脚本时,图像不会加载到Safari或Chrome中。 干杯。
我有以下 HTML 代码:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider"></div>
<script src="slider.js" type="text/javascript"></script>
</body>
还有 JS
slideShow();
var imgArray = [
'Images/image1.jpg',
'Images/image2.jpg',
'Images/image3.jpg',
'Images/image4.jpg',
'Images/image5.jpg',
'Images/image6.jpg',
'Images/image7.jpg',
'Images/image8.jpg'
],
curIndex = 0;
imgDuration = 5000;
function slideShow() {
$("#slider")
.fadeOut('slow', function() {
var img = $("<img />")
.attr('src', imgArray[curIndex])
.on('load', function() {
$("#slider")
.html(img)
.fadeIn('normal', function() {
curIndex++;
if (curIndex == imgArray.length) {
curIndex = 0;
}
setTimeout(slideShow, imgDuration);
});
});
});
}
【问题讨论】:
-
您是使用服务器还是仅使用 os 文件系统加载页面?
-
我尝试通过使用 Chrome 打开在本地加载文件,但也尝试将其在线上传到我的网页,但它也无法加载
-
您的代码本质上适用于任何浏览器——我唯一需要做的事情(在 jsfiddle 上进行测试)就是将整个 js 包装在
$(function() { ..your code here.. });中——但那是为了得到它可以与 jsfiddle 的任何浏览器一起使用 - 试试看,看看它是否有帮助 -
我尝试了同样的方法并为我工作 - jsfiddle.net/r1a3q8f0
-
Jaramonda 我已经尝试过了,但它仍然无法正常工作,我想知道这是否是我的设备所以试图将它加载到我的手机上但仍然没有乐趣,奇怪的是 Pravin 的解决方案确实对我有用在 safari 和 chrome 上的 jsfiddle 上
标签: javascript jquery google-chrome safari