0

我正在使用SlidesJS jQuery 插件并调用

jQuery.slides();

但是，这无法正常工作。相反，图像只是全部显示（正如您在没有插件的情况下所期望的那样）。

为什么这不起作用，我怎样才能让它起作用？

我确定 javascript 正在运行，因为我alert()在 slides() 语句的上方和下方进行了测试。

这是我的标记：

<div class="slides">
    <div class="slides_container">
        <div>
            <img src="Images/sample_banner.png" />
        </div>
        <div>
            <img src="http://placehold.it/984x111" />
        </div>
        <div>
            <img src="http://placehold.it/984x111/ff0000" />
        </div>
    </div>
</div>


 <div class="left_arrow"><a href="#"><img src="Images/left_arrow.png" alt="left arrow control" /></a></div>
 <div class="right_arrow"><a href="#"><img src="Images/right_arrow.png" alt="right arrow control" /></a></div>

这是我的CSS：

.banner
{
    width:984px;
    border-left:solid 7px #FFFFFF;
    border-right: solid 7px #FFFFFF;    
    z-index:1;
    position:relative;
}

    .banner .slides
    {
    }
        .banner .slides .slides_container {
            width:984px;
            height:111px;
        }
            .banner .slides .slides_container div
            {
                width:984px;
                height:111px;
                display:block;
            }


.left_arrow
{
    position:absolute;
    z-index:2;
    width:25px;
    left:0px;
    top:38px;

}

.right_arrow
{
    position:absolute;
    z-index:3;
    width:25px;
    left:960px;
    top:38px;
}

这是我的 JS：

$(document).ready(function () {
        $('.slides').slides({
           next: 'right_arrow'
           , prev: 'left_arrow'
           , pagination: false
         });
    });
4

3 回答 3

2

即使你的问题基本解决了。然后还有一些其他的布局问题。

  1. 如果没有.banner .slides如何应用<div class="banner" />？
  2. 箭头位置错误并且它们的 css 不是最佳的
  3. 你不需要在这么多地方设置宽度或高度
  4. 分页仍然出现，虽然你不想要它
  5. 箭头和 z-index 的奇怪问题

还有更多的小问题，我修复了，使代码优化和干燥。

我的例子：http: //jsfiddle.net/hobobne/RSncf/1/

于 2011-10-06T10:07:05.677 回答
1

在您的 javascript 中，您的目标是一个 id #slides，而在您的标记中，您包含的 div 元素有一个类声明 - 所以将您的标记更改为 <div id="slides"> 并试一试。

于 2011-10-06T09:20:56.077 回答
0

是的，我做了同样的事情。

这是因为函数不是 .slides 它是 .slidesjs

至少，这就是为我解决的问题。

于 2013-05-13T14:51:09.127 回答