请帮我解决jquery幻灯片

Question

我使用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>

Answer 1

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

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

1. 图片实际上并不存在，所以你不知道它是否正常工作

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

3. #slider仍然隐藏，而且内部的UL只在pt/px之间切换。

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

修改

您遇到的问题与easySlider如何计算尺寸有关。

你从

开始

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

当easySlider代码启动时，它会尝试找出尺寸。由于高度和宽度都设置为0，因此它无法实际显示幻灯片并放弃（这是一个过于简单化的）

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

解决方法是从你的DIV中删除display:none并使用JS 在easySlider加载完成后隐藏它。

所以要解决这个问题。

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

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

   

    $(document).ready(function(){   
        $("#slider").easySlider({
           auto: true, 
           continuous: true
        });
        $('.hideMeLater').hide();//hiding all the divs we removed display:none from
    });
   

此应该修复幻灯片问题。我在这里设置了一个示例小提琴：http://jsfiddle.net/jomanlk/jFePh/3/

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

此外，您应该清理HTML。

Answer 2

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