Question

这可以在http://adamginther.com上找到，当点击Canucks图标时。 Canucks图标是“信息架构和可用性”下面的第三个图标。

我正在尝试创建一个jQuery幻灯片，并使用模板创建它，我不知道为什么它不起作用。有一个div包含幻灯片显示的三个图像，jQuery用于检查哪个图像处于活动状态并调整z-index。我希望我能更具描述性，但我不是jQuery和JS的大师，并在网上找到了这个模板。

HTML

    <p>
            <button class="closeButton">X</button>
        <br>
        <br><class id="blueText">You are viewing: Canucks Usability Tests</class><br>Role: Usability Testing<br><br>The Vancouver Canucks is one of Canada's biggest sports teams, with a very strong and avid community. A lot of their community use their website to interact with each other about recent trades, rumours, and debates. 
        <br>
        <br>
        I was tasked with testing the usablity of Canucks.NHL.com's community features and social features. This involved in analyzing Canucks' target user and thinking of the potential downfalls the user may have while navigating the website and recording a test participant doing so. These tests ended up being successful in pointing out the uncovered flaws.
    </p>
        <div id="slideshow">
        <img src="images/work/canucks1.png" alt="Canucks Image 1" class="active">
        <img src="images/work/canucks2.png" alt="Canucks Image 2">
        <img src="images/work/canucks3.png" alt="Canucks Image 3">
    </div>

jQuery的/使用Javascript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Answer 1

根据JSFiddle的提供这是 updated solution On JSFiddle

DEMO on JSBIN

您正在检查'.active elements'上的长度，该长度始终为1（因为在任何给定点将有1个活动元素）... 同样方式$active.next()也不会有length of $active is 1

这样的元素

以下是更新的代码..如果您需要任何澄清，请告诉我。

function slideSwitch() {
    var imgs=$("#slideshow img");
    var $active = imgs.filter('.active');

    if ( $active.length == 0 ){
        $active = imgs.last();
    }
    // use this to pull the images in the order they appear in the markup
    var activeIndex=imgs.index($active);
    var $next = (activeIndex ===( imgs.length-1)) ?imgs.first(): imgs.eq(activeIndex+1); // THis line changed...

    $active.addClass('last-active');

    $next.css({opacity: '0.0'})
    .addClass('active')
    .animate({opacity: '1.0'}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
       setInterval( slideSwitch, 5000 );// This line changed
});

Answer 2

我在这里为您提供有关如何从头创建jQuery滑块的教程。步骤很简单，我相信它对你有用。

您只需准备HTML，CSS和javaScript代码。

$(document).ready( function($){var slider = $('.slider').find('ul'); })

你的一切都完成了。抱歉我显示的短代码。我不知道如何使用这个文本编辑器格式化代码。只需访问该链接以获取更多信息。 http://nextopics.com/creating-jquery-slider-from-scratch/希望这会有所帮助。

jQuery / Javascript幻灯片不改变图像

2 个答案: