需要帮助来解决滑块 JavaScript 与 Safari 的冲突

Need help to resolve a slider javascript conflict with Safari

本文关键字：JavaScript Safari 冲突 帮助 解决      更新时间：2023-09-26

我在网站上使用的滑块遇到问题。（www.cloosedesign.com）该网站是我为朋友制作的作品集。所以有几部作品要展示。每件作品都作为链接列出，当您单击链接时，它会通过滑块显示相应的图片。（我已经放了一些PHP来从数据库Mysql中获取正确的图片）。

它工作正常，除了在SAFARI上。事实上，有时当我点击链接时，页脚的文本（黑框上的白色文本）会消失并重新出现，就像页面刷新一样。此 pb 有时在第三次单击后出现，有时在多次单击后出现。

这是我的代码：

在<head>：我正在调用jquery：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

我正在调用滑块的 javascript 文件：

<script type="text/javascript" src="js/slides.min.jquery.js"></script>

然后在portfolio_english页面中，我正在检查与所选作品对应的图像（= $contenu）：

<?
        $images_sql = "SELECT * FROM `a_fichier`
                WHERE id_fiche=".$contenu."
                    ORDER BY tri";
        $images = mysql_query($images_sql);
        echo'<div id="slides">';
        echo '<div class="slides_container">';
        while ($image=mysql_fetch_array($images))
            {
            echo "<img src='Images/PorteDoc2/".$image['nom']."' width='540' height='600' alt='".$image['titre']."' />"; 
            }
        echo '</div>';
        echo '</div>'; ?>

就在php代码之后，我写了以下javascript：

<script type="text/javascript">
$(document).ready(function() {
    $('#slides').slides({
        preload: true,
        preloadImage:'Images/img/loading.gif',
        pagination: true,
        fadeSpeed: 0,
        slideSpeed: 0,
        effect: 'slide, slide',
    });
});
</script>

然后我调用页脚.php文件。谢谢

这个 http://jsfiddle.net/NNSqw/是执行我的意思的代码，它使用jquery和ajax，现在，解释html位非常简单，带有id="content"的div将是您的内容将被加载到的地方。

现在到 JS/JQuery，每次用户按下链接时，带有id="content"的div 的内容都会发生变化，您必须制作一个名为 get_images.php 的页面，并使其使用 php 代码$_GET['realisation'];来获取点击的链接数量，然后从那里它将像您当前的页面:)一样工作。

对不起，我不擅长解释，但是，如果您希望我尝试进一步澄清它，请说:)

编辑：

在您的portfolio_english.php文件中，应该存在以下代码（我使用的是您网站的英文版本）：

<span class="link" onClick="javascript: show_image('1')">Entreprise internationale    1</span><br>
<span class="link" onClick="javascript: show_image('2')">Entreprise internationale 2</span><br>
<span class="link" onClick="javascript: show_image('3')">Entreprise internationale 3</span><br>
<span class="link" onClick="javascript: show_image('4')">Entreprise internationale 4</span>

你应该有你的链接，旁边有一个onClick事件，引导他们到应该在页面头部的javascript函数：

<html>
     <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript">
         show_image(no){
             $.ajax({
                 url: 'get_images.php?realisation='+no,
             success: function(data) {
                 $('#content').html(data);
            }
          });
         }
     </script>
    [... rest of header ...]
    </head>

同样在该文件中，您应该具有当前显示图像的div

<div id="content">
</div>​

get_image.php

在你的get_image.php你需要拥有你当前用来获取图像的东西，所以要把数字（例如 41）输入到你正在使用的 php 代码中，请使用：

<?php
$number = $_GET['realisation'];
[... Rest of php code to retrieve images ...]
?>

另外，如果您仍然不明白我要去哪里，请尝试阅读jquery文档，看看您是否更了解它，然后：http://api.jquery.com/jQuery.ajax/

好的，在进行任何真正的调查之前，让我们先解决一些问题。

  1. 将jQuery更新到最新版本（http://jquery.com/），那么你就不需要现在内置的缓动插件了。

  2. 与其绑定到 window.onload，不如使用正确的语法来使用 jQuery：

 

$(document).ready(function() {
    $('#slides').slides({
        preload: true,
        preloadImage:'Images/img/loading.gif',
        pagination: true,
        fadeSpeed: 0,
        slideSpeed: 0,
        effect: 'slide, slide',
    });
});

如果这没有任何好处，请制作一个非常小的测试页面，其中只有您与滑块一起使用的代码，并检查它是否仍然是一个问题。

老实说，我真的不知道为什么人们使用这些庞大的滑块插件，制作滑块是一项简单的小工作，需要不到 10 行 jQuery。

相关文章：