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