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

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

效果预览：

HTML部分代码：

<divid="banner"><divid="banner_bg"></div><divid="banner_info"></div><ul><li></li><li></li><li></li></ul><divid="banner_list"><ahref="#"><imgsrc=""alt="bing读心机器人"title="bing读心机器人"border="0"width="705"height="240"/></a><ahref="#"><imgsrc=""alt="手机辐射监测器"title="手机辐射监测器"border="0"width="705"height="240"/></a><ahref="#"><imgsrc=""alt="GIF快手"title="GIF快手"border="0"width="705"height="240"/></a></div></div>

#banner_bg是图片下方半透明的title背景图#banner_info里面内容显示图片标题<ul>部分是右下方三个切换图片的小按钮#banner_list里面是要轮播的三张图片

CSS样式：

#banner{position:relative;width:705px;height:240px;overflow:hidden;font-size:16px;margin:5pxauto;}#banner_listimg{border:0px;}#banner_bg{width:705px;position:absolute;color:#fff;bottom:0;background:url(../v2_p_w_picpaths/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}#bannerul{position:absolute;list-style-type:none;;z-index:1002;margin:0;padding:0;bottom:8px;right:5px;}#bannerulli{width:18px;height:18px;float:left;display:block;cursor:pointer;margin:0pxauto;background:url(../v2_p_w_picpaths/scropoint.png)no-repeat;overflow:hidden;color:#a3a1a2;font-size:9px;line-height:18px;text-align:center;}#bannerulli.on{background:url(../v2_p_w_picpaths/scropoint_on.png)no-repeat;color:#78e927;}#banner_lista{position:absolute;

JS部分：

<scripttype="text/javascript">varn=0;vart;varcount;//定义所需变量$(function(){$("li:first").addClass("on");//给第一个按钮加上选中样式count=$("#banner_lista").length;//为了让HTML上的代码可自动循环就必须定义banner_list下所含图片的长度$("#banner_lista:not(:first-child)").hide();//让除了不是第一张图的隐藏掉$("#banner_info").html($("#banner_lista:first-child").find("img").attr('alt'));//把图片的alt属性的值添加到标题栏上去$("#banner_info").click(function(){window.open($("#banner_lista:first-child").attr('href'),"_blank")});//点击标题另开新窗口打开对应链接varbli=$("#bannerli");bli.each(function(i){//利用JQuery的遍历实现点击li的时候自动切换到下一张bli.eq(i).click(function(){n=i;$("#banner_info").html($("#banner_lista").eq(i).find("img").attr('alt'));$("#banner_lista").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(500);//筛选出所有可见元素，然后取当前点击的fadeOut，其他的fadeIn$(this).addClass("on");//给所点击的li加上样式$(this).siblings().removeAttr("class");});//移除同级li的样式});t=setInterval("showAuto()",3000);$("#banner").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",3000);});})//设置自动执行时间为3s，利用setInterval自动无限延时加载，同时鼠标放上去后移除自动加载效果，鼠标移开后再继续执行轮播方法。functionshowAuto(){n=n>=count?0:++n;//如果n>=图片总个数的话重新赋值为0，也就是从头算起，达到自动切换到第一张的效果$("#bannerli").eq(n).trigger('click');}//在每一个匹配的li上绑定触发click事件</script>

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

具体代码如下：

在showAuto()方法里加上：

functionshowAuto() { $("#banner_list a").stop(true,true); n=n>=count?0:++n;//如果n>=图片总个数的话重新赋值为0，也就是从头算起，达到自动切换到第一张的效果 $("#bannerli").eq(n).trigger('click'); }

附上stop方法详解：

定义和用法

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

语法

$(selector).stop(stopAll,goToEnd) 参数 描述 stopAll 可选。规定是否停止被选元素的所有加入队列的动画。 goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。