Googleapis / Jquery 周期在 Macbook Air 上停止工作

Googleapis / Jquery cycle stopped working on Macbook Air

我有一个多年来一直运行良好的网页。在过去的几天里,我收到了用户的投诉,称 googleapi 的 "Cycle" 选项在 Macbook Air 上停止工作。以下代码继续适用于使用 Firefox、Chrome、IE 和 Edge 的 PC。奇怪的是,"cycle" 在我的 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 用户的问题是图像一个接一个地显示在四行中,覆盖了本应出现在循环图像下方的网站文本。这就像 "Cycle" 引用被忽略了。您是否知道为什么对于带有 Safari 的 MacBook Air 突然发生这种情况?感谢您查看此内容。

我解决了这个问题。我意识到我已经好几年没看过 Google 上托管的 JQuery 版本了。我有 "If it ain't broke, don't fix it" 的心态。当我查看版本时,我注意到 google 提供 JQuery 3.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 以及上述所有 windows / 浏览器组合上,一切都运行良好。