jQuery简单的图片切换效果 Simple slideshow

• 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