0

这可以在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 );
});
4

2 回答 2

0

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

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

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

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

于 2013-05-26T13:02:51.800 回答
0

根据提供的 JSFiddle
这里是JSFiddle 上的更新解决方案

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
});
于 2013-05-26T08:33:03.440 回答