0

スライドショーには簡単なスライダーを使用しました。同じ html ページの 2 つの場所で同じスライダーを使用する必要があります。

これを試しましたが、スライダーが 1 つしか機能しません。

<script type="text/javascript" src="js/easySlider.packed.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider_single").easySlider();
        $("#slider_specials").easySlider(); 


});
</script>

HTML コード:

<div id="slider_single">
<ul>
<li><a href="#"><img src="images/slider1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slider2.jpg" alt="" /></a></li>
</ul>
</div>


<div id="slider_specials">
<ul>
<li><a href="#"><img src="images/slider3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slider4.jpg" alt="" /></a></li>
</ul>
</div>

これを修正する方法は？

4

3 に答える 3

0

1つのドキュメントで2つの簡単なスライダーを作成することに問題はありません。

フィドルをチェックアウト：http：//jsfiddle.net/Qetmn/

使用されるhtml：

<div class='content' id="slider_single">
<ul>
    <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
<div class='content' id="slider_specials">
<ul>
    <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>

使用されるcss：

 .content {
    position:relative;
 }
 .content img {
    width:696px;
    height:241px;
 }
 .content ul, .content ul li {
    margin:0;
    padding:0;
    list-style:none;
 }

そしてあなたの同じjQuery：

$("#slider_specials").easySlider();
$("#slider_single").easySlider();

そしてこのeasy sliderプラグイン：

http://cssglobe.com/lab/easyslider1.7/js/easySlider1.7.js
于 2013-02-16T07:15:25.867 に答える
0

@lifeline同じ HTML ページで 2 つのスライダーを作成するEasy Sliderについては、このリンクを参照してください。

（または）スクリプトを次のように変更します

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

            });
            $("#slider_specials").easySlider({ 
                auto: true,
                continuous: true
            });
        }); 
    </script>
于 2013-02-16T07:02:25.067 に答える
0

div では、CSS スタイルが適用されていることを確認する必要があります。これは、同じページの 2 つのスライダーで動作することがわかっているスタイルです。

<div id="slider" style="width: 696px; height: 241px; overflow: hidden;">
  <ul style="width: 4176px; margin-left: -2088px;">
    <li style="float: left; margin-left: -696px;">
    <li style="float: left;" />
    <li style="float: left;" />
    <li style="float: left;" />
  </ul>
</div>

両方のスライダーでそれを試して、両方が同じページで機能するかどうかを確認してください.

于 2013-02-16T06:52:13.147 に答える