0

我使用 jquery easyslider 创建了一个幻灯片。但它没有发生。我无法找到问题的确切位置。

Javascript如下：

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true
        });
    }); 
</script>

..和相应的HTML：

<div id="slider">
    <ul>                
        <li><img src="Beauty/1.jpg" /></li>
        <li><img src="Beauty/2.jpg" /></li>
        <li><img src="Beauty/3.jpg" /></li>
        <li><img src="Beauty/4.jpg" /></li>
        <li><img src="Beauty/5.png" /></li>         
    </ul>
</div>
4

2 回答 2

0

您在此处发布的代码正在运行。我设置了一个小提琴：http: //jsfiddle.net/jomanlk/jFePh/

在 HTML 页面中查看您的代码有几个问题。

  1. 这些图像实际上并不存在，因此您不知道它是否正常工作

  2. 您的显示/隐藏代码似乎不起作用（toggleMe('para2')我认为）。它实际上并没有显示所有容器。

  3. #slider保持隐藏状态，内部的 UL 只是不断在pt/px.

您的标记似乎没问题，但您的 JS 没有按预期工作。页面顶部包含了很多 JS，我假设是 Dreamweaver。在向页面添加任何功能之前，您可能希望清除所有这些并让基础工作正常。

编辑

您遇到的问题与 easySlider 计算尺寸的方式有关。

你从

<div id="para3" style="display:none">

当easySlider 代码启动时，它会尝试计算尺寸。由于高度和宽度设置为 0 它认为它实际上不能做幻灯片并放弃（这是一个过度简化）

这可以在我设置的这个小提琴中看到：http: //jsfiddle.net/jomanlk/jFePh/2/

对此的解决方案是从您的 DIV 中删除并在easySlider 加载并完成其位后display:none使用 JS 隐藏它。

所以要解决这个问题。

  1. 删除 style属性并添加一个类，使其看起来像这样<div id="para1" class="hideMeLater">

  2. 更改文档顶部的 JS，使其如下所示

    $(文档).ready(函数(){   
        $("#slider").easySlider({
           自动：是的，
           连续：真
        });
        $('.hideMeLater').hide();//隐藏我们删除的所有div display:none
    });

这应该可以解决您的幻灯片问题。我在这里设置了一个带有示例的小提琴：http: //jsfiddle.net/jomanlk/jFePh/3/

顺便说一句，我建议您熟悉 JS 和 jquery，以便了解包含插件时实际发生的情况。网上有一些优秀的教程。

此外，您应该清理您的 HTML。

于 2011-04-16T12:53:34.733 回答
0

您有id="slider"多个元素尝试提供唯一的 id.. 我认为它会起作用...

于 2011-04-16T12:55:02.073 回答