Jquery幻灯片轮换—focusbox

 

幻灯片轮换展现着页面重要信息，一个独特并富有创意幻灯效果总是常常吸引着我。它包含着设计师的想象力和前端制作者的巧妙处理手法。虽然幻灯片的效果已很是很多了，但是这个有它特殊的地方吸引着我，跟大家分享一下。 

特点

1. 输出循环图片列表即可；    
2. 鼠标移进幻灯片时停止自动切换；    
3. 左右按钮进行切换调整；    
4. 右下角小点按钮可切换，切换后有直观进度反映；    
5. 自动切换有右上角有进度Loading反映(偶最喜欢);    

 

使用说明：

XML/HTML代码

1. <div id="rotator" class="rotator">  
2.     <a class="btn prev" href="#prev">previous</a>  
3.     <a class="btn next" href="#next">next</a>  
4.     <div class="rotator_cont">  
5.         <div class="loader"><div id="loader_pic" class="loader_pic"></div></div>  
6.         <ul>  
7.             <li><a href="http://rainweb.cn/1/"><img src="p_w_picpaths/pic/pic_1.jpg" alt="" /></a></li>  
8.             <li><a href="http://rainweb.cn/2/"><img src="p_w_picpaths/pic/pic_2.jpg" alt="" /></a></li>  
9.             <li><a href="http://rainweb.cn/3/"><img src="p_w_picpaths/pic/pic_3.jpg" alt="" /></a></li>  
10.             <li><a href="http://rainweb.cn/4/"><img src="p_w_picpaths/pic/pic_4.jpg" alt="" /></a></li>  
11.             <li><a href="http://rainweb.cn/5/"><img src="p_w_picpaths/pic/pic_5.jpg" alt="" /></a></li>  
12.         </ul>  
13.     </div>  
14.     <div class="overlay"></div>  
15. </div>  

JavaScript代码

1. $(function(){   
2.     focusBox('rotator');   
3. })  

 

查看演示    下载地址