jQuery简单的图片切换效果 Simple slideshow
作者:网络 来源:佚名 更新时间:2010-12-25 17:12:29 点击:
- Show only the first image and hide the others;
- Place a “current” class on the list-item;
- Only exucute the function once when it has a current status.
That’s it? Yep… it’s that simple!
jQuery code
$(function() { var imgWrapper = $('.slideshow > img'); // only show the first image, hide the rest imgWrapper.hide().filter(':first').show(); $('ul.recentlist li a').click(function () { // check if this item doesn't have class "current" // if it has class "current" it must not execute the script again if (this.className.indexOf('current') == -1){ imgWrapper.hide(); imgWrapper.filter(this.hash).fadeIn(500); $('ul.recentlist li a').removeClass('current'); $(this).addClass('current'); } return false; }); });
We are making sure that when a list-item has the “current” class, the script won’t be executed again.
CSS code
.slideshow { position: relative; background: #fafafa; width: 403px; height: 240px; border: 1px solid #e5e5e5; margin-bottom: 20px; } .slideshow img { position: absolute; top: 3px; left: 3px; z-index: 10; background: #fff; } ul.recentlist { position: absolute; bottom: 12px; right: 4px; list-style: none; z-index: 20; } ul.recentlist li { display: inline; } ul.recentlist li a, ul.recentlist li a:visited { display: block; float: left; background: #e5e5e5; padding: 4px 8px; margin-right: 1px; color: #000; text-decoration: none; cursor: pointer; } ul.recentlist li a:hover, ul.recentlist li a:visited:hover { background: #666; color: #fff; } ul.recentlist li a.current { background: #f00; color: #fff; }
In this example the unordered list is absolute, that way you can easily position the list-items above the images.
HTML code
<div class="slideshow"> <ul class="recentlist"> <li><a class="current" href="#slide1">1</a></li> <li><a href="#slide2">2</a></li> <li><a href="#slide3">3</a></li> </ul> <img id="slide1" src="slide-1.gif" alt="Image 1 slideshow" /> <img id="slide2" src="slide-2.gif" alt="Image 2 slideshow" /> <img id="slide3" src="slide-3.gif" alt="Image 3 slideshow" /> </div