0

我不想使用插件，但对 jQuery 很陌生——我有以下 HTML：

<div class="slide">
    <a href="http://www.mysite.co.uk"><img src="images/img.jpg" width="920" height="360" /></a>
    </div>

<div class="slide">
    <a href="http://www.mysite.co.uk"><img src="images/img.jpg" width="920" height="360" /></a>
    </div>

<div class="slide">
    <a href="http://www.mysite.co.uk"><img src="images/img.jpg" width="920" height="360" /></a>
    </div>

我已经使用 jQuery 隐藏了除第一个“幻灯片”之外的所有内容：

$('.slide:first').siblings().css('display', 'none');

我现在要做的是通过幻灯片 div 自动前进，所以隐藏第一个 div.slide 并显示第二个然后隐藏它以显示第三个并重复。我看过淡入淡出切换功能，但有点迷茫？

谢谢，约翰

4

1 回答 1

2

这应该对您有所帮助。它的基本作用是：

  1. 隐藏除第一个幻灯片元素之外的所有元素。
  2. 在被调用的函数中，您想要隐藏当前显示的元素并显示下一个元素。这很简单：

这是一个jsfiddle：http: //jsfiddle.net/lucuma/CXsdP/4/ 

function doSlides() {

        var imgIndex = $('#slideshow div:visible').index();

        var imgNext = (imgIndex + 1) % $('#slideshow div').length;

        $('#slideshow div:visible').fadeOut(500);

        $('#slideshow div').eq(imgNext).fadeIn(500);
    }
    $('#slideshow div:gt(0)').hide();

    setInterval(doSlides, 1000);

这是另一种方法：

function doSlides() {
    var $imgIndex = $('#slideshow div:visible');

    var $next = $imgIndex.next();

    if ($next.length==0) {
        $next = $('#slideshow >:first-child');   // loop back to first 
    }
    $imgIndex.fadeOut(500);  
    $next.fadeIn(500);
}

$('#slideshow div:gt(0)').hide();

setInterval(doSlides, 1000);

​ ​</p>

于 2012-05-17T14:32:01.470 回答