0

ループで実行したい 1 ページに 4 つのスライドショーがあります。Jon Raasch のシンプルな JQuery スライドショーに基づいており、非常にシンプルです。

マークアップと CSS は得意ですが、JavaScript はまだあまり得意ではありません。現在、1 つのスライドショーを動作させることはできますが、同時に 4 つを動作させることはできません。4つすべてを機能させるための助けが欲しいです。ありがとう！

JS:

<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>

  <script type="text/javascript">
  $('#slider1').bxSlider({
    auto: true,
    autoControls: true,
    pause: 3000,
    slideMargin: 20
  });

  $('#slider2').bxSlider({
    auto: true,
    autoControls: true,
    pause: 3000,
    slideMargin: 20
  });

  $('#slider3').bxSlider({
    auto: true,
    autoControls: true,
    pause: 3000,
    slideMargin: 20
  });

  $('#slider4').bxSlider({
    auto: true,
    autoControls: true,
    pause: 3000,
    slideMargin: 20
  });
  </script>

CSS:

.slider {
    position: relative;
    float: right;
    padding-right: 400px;
    margin-left: 40px;
    height: 350px;
}

.slider img {
    position: absolute;
    max-width: 350px;
    height: auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    top: 0;
    left: 0;
    z-index: 8;
}

マークアップ:

<div>
    <div class="slider">
        <ul id="slider1">
            <li><img src="images/.../art-1.jpg" /></li>
            <li><img src="images/.../art-2.jpg" /></li>
            <li><img src="images/.../art-3.jpg" /></li>
            <li><img src="images/.../art-4.jpg" /></li>
            <li><img src="images/.../art-5.jpg" /></li>
        </ul>
    </div>
</div>

<div>
    <div class="slider">
        <ul id="slider2">
            <li><img src="images/.../bnl-1.jpg" /></li>
            <li><img src="images/.../bnl-2.jpg" /></li>
            <li><img src="images/.../bnl-3.jpg" /></li>
            <li><img src="images/.../bnl-4.jpg" /></li>
            <li><img src="images/.../bnl-5.jpg" /></li>
        </ul>
    </div>
</div>

<div>
     <div class="slider">
        <ul id="slider3">
            <li><img src="images/.../bge-1.jpg" /></li>
            <li><img src="images/.../bge-2.jpg" /></li>
            <li><img src="images/.../bge-3.jpg" /></li>
            <li><img src="images/.../bge-4.jpg" /></li>
            <li><img src="images/.../bge-5.jpg" /></li>
        </ul>
    </div>
</div>

<div>
     <div class="slider">
        <ul id="slider4">
            <li><img src="images/.../rtb-1.jpg" /></li>
            <li><img src="images/.../rtb-2.jpg" /></li>
            <li><img src="images/.../rtb-3.jpg" /></li>
            <li><img src="images/.../rtb-4.jpg" /></li>
            <li><img src="images/.../rtb-5.jpg" /></li>
        </ul>
    </div>
</div>
4

1 に答える 1

1

単純なスライドショーの問題点は、それが単純だということです。bxSliderまたはBootstrap のSliderに切り替えることを検討してください。どちらもすぐに使用できる複数のインスタンスに対応しています。

本当にこれと戦いたい場合は、slideSwitch() 関数に ID を渡し、'#slideshow' の代わりにそれを使用してください。

function slideSwitch(id, switchSpeed, activeClass) {
    var $active = $(id + ' IMG.' + activeClass);

    ...

また、関数を {gag} で 3 回コピーし、それぞれの ID を変更して、スクリプトを効果的に 4 回実行することもできます。

function slideSwitch1(switchSpeed,activeClass) {
    var $active = $('#slideshow1 IMG.' + activeClass);

function slideSwitch2(switchSpeed,activeClass) {
    var $active = $('#slideshow2 IMG.' + activeClass);

...
于 2013-10-15T21:26:08.403 に答える