jquery多个滑块

  • 本文关键字:jquery jquery slider
  • 更新时间 :
  • 英文 :


我有以下代码用于基本的 Jquery 滑块,但这段代码只执行带有该类的单个div:"slide-wrapper",但我需要一次运行 2 个或更多滑块......这是我的完整代码:

.HTML:

<!-- SLIDE 1 -->
<div class="slide-wrapper">
    <div class="slide">
        <a href="#"><img src="images/tmp/adv_left_sup.jpg" width="600" height="100" /></a>
    </div>
    <div class="slide initial-hide">
        <a href="#"><img src="images/tmp/adv_left_sup_2.jpg" width="600" height="100" /></a>
    </div>
    <div class="slide initial-hide">
        <a href="#"><img src="images/tmp/adv_left_sup_3.jpg" width="600" height="100" /></a>
    </div>
</div>
<!-- SLIDE 2 -->
<div class="slide-wrapper">
    <div class="slide">
        <a href="#"><img src="images/tmp/adv_left_sup.jpg" width="600" height="100" /></a>
    </div>
    <div class="slide initial-hide">
        <a href="#"><img src="images/tmp/adv_left_sup_2.jpg" width="600" height="100" /></a>
    </div>
    <div class="slide initial-hide">
        <a href="#"><img src="images/tmp/adv_left_sup_3.jpg" width="600" height="100" /></a>
    </div>
</div>

.CSS:

.slide-wrapper { position: relative; height: 100px; }
.slide-wrapper div.slide { position: absolute; }
.slide-wrapper .initial-hide { display: none; }

.JS:

var currentPosition = 0;
var totalSlides = 0;
$(document).ready(function() {  
    // slides
    totalSlides = $('.slide-wrapper .slide').length;
    setTimeout('transition()', 3000);
});
    transition = function() {
        currentPosition++;
        lastPosition = currentPosition - 1;
        if (currentPosition == totalSlides)
            currentPosition = 0;
        if (lastPosition < 0)
            lastPosition = totalSlides - 1;
        $('.slide-wrapper .slide:eq(' + lastPosition + ')').fadeOut('slow');
        $('.slide-wrapper .slide:eq(' + currentPosition + ')').fadeIn('slow');
        setTimeout('transition()', 3000);
    }

希望您的帮助,谢谢
PD 对不起我的英语:)

嗯,

我完全听不懂(我的英语是unly)...

您是否正在使用 jquery-ui 滑块?

检查一下,您可以执行滑块和多滑块。

您有一个 2 个滑块,带有某个类名"幻灯片包装器",如何在滑块中转换它?

$('slide-wrapper').slider({...});

你可以有很多带有类名滑块包装器的元素,有些元素有一个 id,ex;

<div class="slide-wrapper" id="slider1">

来自Jquery:

$('#slider1').slider({...});

相关内容

  • 没有找到相关文章

最新更新