请帮我解决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 如何计算尺寸有关。

当 easySlider 代码启动

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

时，它会尝试计算出尺寸。由于高度和宽度设置为 0，因此它实际上无法进行幻灯片放映并放弃（这是一种过度简化），

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

解决方案是删除 < code>display:none 从您的 DIV 中显示，并在 easySlider 加载并完成其功能后使用 JS 隐藏它。

所以要解决这个问题。

1. 删除 style 属性并添加一个类，使其看起来像这样
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..
我想然后它会起作用...