鼠标移到控制点显示缩略图的jquery相册源码，兼容IE6_滚动轮播_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍
jquery相册源码
鼠标移到控制点显示缩略图的jquery相册源码，兼容IE6。里面用到了一些css3效果，可能在IE8以下浏览器显示效果不如火狐等好看。建议升级您的IE浏览器或者换成别的内核的浏览器以达到更好的体验效果。
使用方法
1、在头部引入如下代码：
`1`	`<link` `rel="stylesheet"` `type="text/css"` `href="css/style.css"` `/>`
`2`	`<script` `type="text/javascript"` `src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>`
2、把以下代码拷贝到你想引用的地方
001<div id="ps_container" class="ps_container">
002    <div class="ps_image_wrapper">
003     <!-- First initial image -->
004     <img src="images/1.jpg" alt="" />
005    </div>
006    <!-- Navigation items -->
007    <div class="ps_next"></div>
008    <div class="ps_prev"></div>
009    <!-- Dot list with thumbnail preview -->
010    <ul class="ps_nav">
011     <li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
012     <li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
013     <li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
014     <li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
015     <li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
016     <li><a href="images/6.jpg" rel="images/thumbs/6.jpg">Image 6</a></li>
017     <li><a href="images/7.jpg" rel="images/thumbs/7.jpg">Image 7</a></li>
018     <li><a href="images/8.jpg" rel="images/thumbs/8.jpg">Image 8</a></li>
019     <li><a href="images/9.jpg" rel="images/thumbs/9.jpg">Image 9</a></li>
020     <li><a href="images/10.jpg" rel="images/thumbs/10.jpg">Image 10</a></li>
021     <li class="ps_preview">
022      <div class="ps_preview_wrapper">
023       <!-- Thumbnail comes here -->
024      </div>
025      <!-- Little triangle -->
026      <span></span>
027     </li>
028    </ul>
029   </div>
030    
031  </div>
032  <!-- The JavaScript -->
033        <script type="text/javascript">
034   /*
035   the images preload plugin
036   */
037   (function($) {
038    $.fn.preload = function(options) {
039     var opts  = $.extend({}, $.fn.preload.defaults, options),
040      o  = $.meta ? $.extend({}, opts, this.data()) : opts;
041     return this.each(function() {
042      var $e = $(this),
043       t = $e.attr('rel'),
044       i = $e.attr('href'),
045       l = 0;
046      $('<img/>').load(function(i){
047       ++l;
048       if(l==2) o.onComplete();
049      }).attr('src',i); 
050      $('<img/>').load(function(i){
051       ++l;
052       if(l==2) o.onComplete();
053      }).attr('src',t); 
054     });
055    };
056    $.fn.preload.defaults = {
057     onComplete : function(){return false;}
058    };
059   })(jQuery);
060  </script>
061        <script type="text/javascript">
062   $(function() {
063    //some elements..
064    var $ps_container  = $('#ps_container'),
065     $ps_image_wrapper  = $ps_container.find('.ps_image_wrapper'),
066     $ps_next   = $ps_container.find('.ps_next'),
067     $ps_prev   = $ps_container.find('.ps_prev'),
068     $ps_nav    = $ps_container.find('.ps_nav'),
069     $tooltip   = $ps_container.find('.ps_preview'),
070     $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
071     $links    = $ps_nav.children('li').not($tooltip),
072     total_images  = $links.length,
073     currentHovered  = -1,
074     current    = 0,
075     $loader    = $('#loader');
076     
077    /*check if you are using a browser*/ 
078    var ie     = false;
079    if ($.browser.msie) {
080     ie = true;//you are not!Anyway let's give it a try
081    }
082    if(!ie)
083     $tooltip.css({
084      opacity : 0
085     }).show();
086      
087      
088    /*first preload images (thumbs and large images)*/
089    var loaded = 0;
090    $links.each(function(i){
091     var $link  = $(this);
092     $link.find('a').preload({
093      onComplete : function(){
094       ++loaded;
095       if(loaded == total_images){
096        //all images preloaded,
097        //show ps_container and initialize events
098        $loader.hide();
099        $ps_container.show();
100        //when mouse enters the pages (the dots),
101        //show the tooltip,
102        //when mouse leaves hide the tooltip,
103        //clicking on one will display the respective image 
104        $links.bind('mouseenter',showTooltip)
105           .bind('mouseleave',hideTooltip)
106           .bind('click',showImage);
107        //navigate through the images
108        $ps_next.bind('click',nextImage);
109        $ps_prev.bind('click',prevImage);
110       }
111      }
112     });
113    });
114     
115    function showTooltip(){
116     var $link   = $(this),
117      idx    = $link.index(),
118      linkOuterWidth = $link.outerWidth(),
119      //this holds the left value for the next position
120      //of the tooltip
121      left   = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
122      //the thumb image source
123      $thumb   = $link.find('a').attr('rel'),
124      imageLeft;
125      
126     //if we are not hovering the current one
127     if(currentHovered != idx){
128      //check if we will animate left->right or right->left
129      if(currentHovered != -1){
130       if(currentHovered < idx){
131        imageLeft = 75;
132       }
133       else{
134        imageLeft = -75;
135       }
136      }
137      currentHovered = idx;
138       
139      //the next thumb image to be shown in the tooltip
140      var $newImage = $('<img/>').css('left','0px')
141               .attr('src',$thumb);
142       
143      //if theres more than 1 image 
144      //(if we would move the mouse too fast it would probably happen)
145      //then remove the oldest one (:last)
146      if($ps_preview_wrapper.children().length > 1)
147       $ps_preview_wrapper.children(':last').remove();
148       
149      //prepend the new image
150      $ps_preview_wrapper.prepend($newImage);
151       
152      var $tooltip_imgs  = $ps_preview_wrapper.children(),
153       tooltip_imgs_count = $tooltip_imgs.length;
154        
155      //if theres 2 images on the tooltip
156      //animate the current one out, and the new one in
157      if(tooltip_imgs_count > 1){
158       $tooltip_imgs.eq(tooltip_imgs_count-1)
159           .stop()
160           .animate({
161           left:-imageLeft+'px'
162            },150,function(){
163            //remove the old one
164            $(this).remove();
165            });
166       $tooltip_imgs.eq(0)
167           .css('left',imageLeft + 'px')
168           .stop()
169           .animate({
170           left:'0px'
171            },150);
172      }
173     }
174     //if we are not using a "browser", we just show the tooltip,
175     //otherwise we fade it
176     //
177     if(ie)
178      $tooltip.css('left',left + 'px').show();
179     else
180     $tooltip.stop()
181       .animate({
182        left  : left + 'px',
183        opacity  : 1
184       },150);
185    }
186     
187    function hideTooltip(){
188     //hide / fade out the tooltip
189     if(ie)
190      $tooltip.hide();
191     else
192     $tooltip.stop()
193          .animate({
194        opacity  : 0
195       },150);
196    }
197     
198    function showImage(e){
199     var $link    = $(this),
200      idx     = $link.index(),
201      $image    = $link.find('a').attr('href'),
202      $currentImage   = $ps_image_wrapper.find('img'),
203      currentImageWidth = $currentImage.width();
204      
205     //if we click the current one return
206     if(current == idx) return false;
207      
208     //add class selected to the current page / dot
209     $links.eq(current).removeClass('selected');
210     $link.addClass('selected');
211      
212     //the new image element
213     var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
214              .attr('src',$image);
215      
216     //if the wrapper has more than one image, remove oldest
217     if($ps_image_wrapper.children().length > 1)
218      $ps_image_wrapper.children(':last').remove();
219      
220     //prepend the new image
221     $ps_image_wrapper.prepend($newImage);
222      
223     //the new image width. 
224     //This will be the new width of the ps_image_wrapper
225     var newImageWidth = $newImage.width();
226     
227     //check animation direction
228     if(current > idx){
229      $newImage.css('left',-newImageWidth + 'px');
230      currentImageWidth = -newImageWidth;
231     } 
232     current = idx;
233     //animate the new width of the ps_image_wrapper 
234     //(same like new image width)
235     $ps_image_wrapper.stop().animate({
236         width : newImageWidth + 'px'
237     },350);
238     //animate the new image in
239     $newImage.stop().animate({
240         left : '0px'
241     },350);
242     //animate the old image out
243     $currentImage.stop().animate({
244         left : -currentImageWidth + 'px'
245     },350);
246     
247     e.preventDefault();
248    }    
249     
250    function nextImage(){
251     if(current < total_images){
252      $links.eq(current+1).trigger('click');
253     }
254    }
255    function prevImage(){
256     if(current > 0){
257      $links.eq(current-1).trigger('click');
258     }
259    }
260   });
261        </script>