现在好多带插件的JQuery焦点图片效果，一个网站那么多效果就要好多插件，这无疑给网站增加一定的负担，现在介绍一款不用任何插件，代码量很少且便于操作的图片轮播效果，希望有所帮助

说下思路，比如有三张图片需要轮播，首先把除了第一张以外的图片隐藏掉，然后点击图片右下方相应的按钮来切换图片显示，用JQuery的fadeIn和fadeOut效果就可以，最后设置延时自动加载方法setInterval()来实现图片轮播到头后自动开始新一轮轮播。 

HTML部分代码：

1. div id="banner"> 

2.     div id="banner_bg">div> 

3.     div id="banner_info">div> 

4.     ul> 

5.     li>li> 

6.     li>li> 

7.     li>li> 

8.     ul> 

9.     div id="banner_list"> 

10.     a href="#">img src=" " alt="bing读心机器人" title="bing读心机器人" border="0" width="705" height="240"/>a> 

11.     a href="#">img src=" " alt="手机辐射监测器" title="手机辐射监测器" border="0" width="705" height="240"/>a> 

12.     a href="#">img src=" " alt="GIF快手" title="GIF快手" border="0" width="705" height="240"/>a> 

13.     div> 

14. div> 

#banner_bg是图片下方半透明的title背景图#banner_info里面内容显示图片标题

部分是右下方三个切换图片的小按钮#banner_list里面是要轮播的三张图片

CSS样式：

#banner {position:relative; width:705px; height:240px; overflow:hidden; font-size:16px; margin:5px auto;} #banner_list img {border:0px;} #banner_bg {width:705px;position:absolute; color:#fff; bottom:0; background:url(../v2_images/toumingbar.png);height:38px;z-index:1000;cursor:pointer; line-height:38px; font-size:14px;} #banner_info{position:absolute; bottom:0px; left:5px;height:38px; line-height:38px; color:#fff;z-index:1001;cursor:pointer} #banner ul {position:absolute;list-style-type:none; ;z-index:1002;margin:0; padding:0; bottom:8px; right:5px;} #banner ul li {width:18px; height:18px;float:left;display:block;cursor:pointer; margin:0px auto; background:url(../v2_images/scropoint.png) no-repeat;overflow:hidden; color:#a3a1a2; font-size:9px; line-height:18px; text-align:center;} #banner ul li.on {background:url(../v2_images/scropoint_on.png) no-repeat; color:#78e927;} #banner_list a{position:absolute;

JS部分：

 现在发现这个图片轮播在谷歌和FF浏览器下有bug，就是当切换到别的标签页的时候动画停止执行了，等你再切换过来的时候会发现动画疯狂执行，可能是由于浏览器线程处理机制的问题，解决办法是在动画执行完毕之后加上JQuery的stop方法来停止被选元素所有加入队列的动画，这样，就算从另外一个标签页切换回来，他会先停止执行动画，然后再继续执行。

具体代码如下：

在showAuto()方法里加上：

1.  function showAuto()  

2.     {  

3. $("#banner_list a").stop(true,true);

4.         n = n >=count?0 : ++n; //如果n>=图片总个数的话重新赋值为0，也就是从头算起，达到自动切换到第一张的效果 

5.         $("#banner li").eq(n).trigger('click'); 

6.     } 

附上stop方法详解：

定义和用法

stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)