Question

我尝试在我的网站上运行Malihu的滚动条（http://manos.malihu.gr/jquery-thumbnail-scroller/），不幸的是我无法在我的网站上运行它。如果我做错了，你能告诉我吗？

（我认为问题可能就在这个代码的某处？不知道......）

<div id="zelena">

<div id="mg1">mg1</div>
<div id="mg2">mg2</div>
<div id="mg3">mg3</div>
<div id="mg4">mg4</div>
<div id="mg5">mg5</div>

<br>

<div id="akt1">akt1</div>
<div id="akt2">akt2</div>
<div id="akt3">akt3</div>
<div id="akt4">akt4</div>
<div id="akt5">akt5</div>

<br>

<div id="prip1">prip1</div>
<div id="prip2">prip2</div>
<div id="prip3">prip3</div>
<div id="prip4">prip4</div>
<div id="prip5">prip5</div>

<br>

<div id="min1">min1</div>
<div id="min2">min2</div>
<div id="min3">min3</div>
<div id="min4">min4</div>
<div id="min5">min5</div>

<br>

</div> <!-- konec #zelena -->

以下是代码：http://jsfiddle.net/Lz6fo597/ eventualy所有文件：http://www.filedropper.com/mgwebslide 谢谢你。

Answer 1

首先，我认为要正确使用此插件，您必须使用ul元素，而不仅仅是div。例如，而不是：

<div id="zelena">
    <div id="mg1">mg1</div>
    <div id="mg2">mg2</div>
    <div id="mg3">mg3</div>
    <div id="mg4">mg4</div>
    <div id="mg5">mg5</div>
</div>

你必须使用它：

<div id="zelena">
    <ul>
        <li id="msg1">msg1</li>
        <li id="msg2">msg2</li>
        <li id="msg3">msg3</li>
        <li id="msg4">msg4</li>
        <li id="msg5">msg5</li>
    </ul>
</div>

那就是说，我也认为你不能让一个滚动条作用于多个 ul，所以这个：

<div id="zelena">
    <ul>
        <li id="msg1">msg1</li>
        <li id="msg2">msg2</li>
        <li id="msg3">msg3</li>
        <li id="msg4">msg4</li>
        <li id="msg5">msg5</li>
    </ul>

    <ul>
        <li id="akt1">akt1</li>
        <li id="akt2">akt2</li>
        <li id="akt3">akt3</li>
        <li id="akt4">akt4</li>
        <li id="akt5">akt5</li>
    </ul>
</div>

不起作用，因此你必须做这样的事情：

<div id="zelena">
    <ul>
        <li id="msg1">msg1</li>
        <li id="msg2">msg2</li>
        <li id="msg3">msg3</li>
        <li id="msg4">msg4</li>
        <li id="msg5">msg5</li>

        <li id="akt1">akt1</li>
        <li id="akt2">akt2</li>
        <li id="akt3">akt3</li>
        <li id="akt4">akt4</li>
        <li id="akt5">akt5</li>

        <li id="prip1">prip1</li>
        <li id="prip2">prip2</li>
        <li id="prip3">prip3</li>
        <li id="prip4">prip4</li>
        <li id="prip5">prip5</li>

        <li id="min1">min1</li>
        <li id="min2">min2</li>
        <li id="min3">min3</li>
        <li id="min4">min4</li>
        <li id="min5">min5</li>
    </ul>
</div>

与一些 css 样式相结合。

最后在使用jQuery与jsFiddle时要小心，因为我在调用初始化函数时有一些问题，因为默认情况下jsFiddle会在页面加载后执行javascript代码，因此：

(function($){
    $(window).load(function(){
        $("#zelena").mThumbnailScroller({
          axis:"x",
          type:"hover-100"
        });
    });
})(jQuery);

可能会导致问题：

$("#zelena").mThumbnailScroller({
    axis:"x",
    type:"hover-100"
});

应该有用。

你可以看看这个Fiddle，我试图获得类似的＆＃34;结构＆＃34;结果与你提供的一样。

不工作的jquery卷轴

1 个答案: