我有一个多年来一直运行良好的网页。在过去的几天里,我收到了用户的投诉,称谷歌api的"循环"选项在Macbook Air上停止了工作。以下代码仍然适用于使用Firefox、Chrome、IE和Edge的PC。奇怪的是,"循环"在我的iPhone Safari浏览器上也很好用。它只是在Macbook上失败了。以下是该网站index.shtml页面的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Page_Specific_Title" -->
<title>My Home Page SHTML</title>
<!-- InstanceEndEditable -->
<link href="CSS/MySite.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #EEE8AA;
p {margin:0; padding:0}
}
-->
</style>
<!-- InstanceBeginEditable name="Page_Specific_Head" -->
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, // speed at which the transition occurs (in miliseconds)
delay: 1000, // time spent on the first slide before starting the slideshow
continuous: 0, // true (1) to start next transition immediately after current one completes
timeout: 9000 // time spent on each slide
});
});
</script>
<meta name="description" content="My text."/>
<meta name="keywords" content="Keywords"/>
<!-- InstanceEndEditable -->
</head>
<body>
<div class="outer_width_1000" >
<div class="index_page_column_1" >
<div class="slideshow" >
<img src="home_page_cycle/image1.jpg" alt="image1"/>
<img src="home_page_cycle/image2.jpg" alt="image2"/>
<img src="home_page_cycle/image3.jpg" alt="image3"/>
<img src="home_page_cycle/image4.jpg" alt="image4"/>
</div>
Macbook用户面临的问题是,这些图像一个接一个地显示在四行中,覆盖了本应出现在循环图像下方的网站文本。这就像"循环"引用被忽略一样。你知道为什么带Safari的MacBook Air会突然发生这种情况吗?谢谢你看这个。
我解决了这个问题。我意识到我已经好几年没有看过谷歌上托管的JQuery版本了。我的心态是"如果它没有坏,就不要修理它"。当我查看这些版本时,我注意到谷歌提供了JQuery3.4.1。所以我更改了原来的行:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
至:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
这解决了问题,现在在MacBook上一切都很好。同样,在iPhone、iPad和上述所有窗口/浏览器组合上,一切都很顺利。