Question

我不想使用插件，但我不熟悉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并显示第二个然后隐藏它以显示第三个并重复。我看过淡入淡出切换功能但有点丢失了吗？

谢谢，约翰

Answer 1

这应该会帮助你一点点。它基本上做的是：

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

这是一个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);

创建自己的jQuery内容滑块/淡入淡出

1 个答案: