Question

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

除SAFARI外，它工作正常。事实上，有时当我点击链接时，页脚的文本（黑匣子上的白色文本）会消失并重新出现，就像页面刷新一样。此pb有时会在第3次点击后显示，或者有时在更多次点击后显示。

这是我的代码：

<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>

然后我调用footer.php文件。感谢

Answer 1

好的，在进行任何真正的调查之前，让我们先了解一些事情。

将jQuery更新到最新版本（http://jquery.com/），然后你不需要现在内置的缓动插件。
不是绑定到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。

Answer 2

这个http://jsfiddle.net/NNSqw/代码是我的意思，它使用jquery和ajax，现在，解释html位非常简单，带有id="content"的div将是你的内容将在哪里加载进去。

现在JS / JQuery，每次用户按下链接时，id="content"的div内容都会发生变化，你必须创建一个名为get_images.php的页面并使其使用php代码{ {1}}获取点击链接的编号，然后从那里开始工作就像当前页面:)。

对不起，我在解释方面并不擅长，但如果你希望我试着澄清一下，那就说：）

修改

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

$_GET['realisation'];

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

<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>

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

<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>

<强> get_image.php

在你的get_image.php中，您需要拥有当前用来获取图片的内容，以便获取数字，例如41进入你正在使用的PHP代码：

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

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

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

2 个答案: