切换方向反了（个人喜好而已）ie部分浏览器中间小点点击无事件响应问题ie7一下一直刷新问题
觉得反了看着不舒服的就改成：_timer=setInterval(function(){$prevBnt.click()},3000); 这样的顺序就对了
<html> <head> <meta charset="UTF-8"> <title>焦点图</title> <link rel="stylesheet" href="css/focusStyle.css"> </head> <body> <div id="focus-banner"> <ul id="focus-banner-list"> <li><a class="focus-banner-img"><img src="banner1.jpg"></a></li> <li><a class="focus-banner-img"><img src="banner2.jpg"></a></li> <li><a class="focus-banner-img"><img src="banner3.jpg"></a></li> </ul> <a href="javascript:;" id="next-img" class="focus-handle"></a> <a href="javascript:;" id="prev-img" class="focus-handle"></a> <ul id="focus-bubble"></ul> </div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="banner.js"></script> </body> </html>
/*banner start*/ #focus-banner{ position: relative; width: 100%; overflow: hidden; } #focus-banner-list{ position: relative; } #focus-banner-list li{ position: absolute; left: 0; top: 0; width: 100%; } #focus-banner-list li img{ width: 100%; } .focus-banner-img{ display: block; } #focus-banner .focus-handle{ position: absolute; top: 50%; margin-top: -40px; z-index: 100; display: block; width: 80px; height: 80px; background-image: url("focus_handle.png"); } #next-img{ left: 0; } #next-img{ left: 50px; background-position: 0 0; } #next-img:hover{ background-position: 0 -80px; } #prev-img{ right: 0; } #prev-img{ right: 50px; background-position: -80px 0; } #prev-img:hover{ background-position: -80px -80px; } #focus-bubble{ position: absolute; left: 50%; bottom: 10px; z-index: 999; } #focus-bubble li{ float: left; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border:1px #fff solid; cursor: pointer; } #focus-bubble li a{ display: block; width: 100%; height: 100%; filter:alpha(opacity=0); opacity: 0; } #focus-bubble li.current{ background-color: #fff; } /*banner end*/
/*banner start*/ $(function(){ var focusBanner=function(){ var $focusBanner=$("#focus-banner"), $bannerList=$("#focus-banner-list li"), $focusHandle=$(".focus-handle"), $bannerImg=$(".focus-banner-img"), $nextBnt=$("#next-img"), $prevBnt=$("#prev-img"), $focusBubble=$("#focus-bubble"), bannerLength=$bannerList.length, _index=0, _timer=""; var _height=$(".focus-banner-img").find("img").height(); $focusBanner.height(_height); $bannerImg.height(_height); for(var i=0; i<bannerLength; i++){ $bannerList.eq(i).css("zIndex",bannerLength-i); $focusBubble.append('<li><a href="javascript:;">'+i+'</a></li>'); } $focusBubble.find("li").eq(0).addClass("current"); var bubbleLength=$focusBubble.find("li").length; $focusBubble.css({ "width":bubbleLength*22, "marginLeft":-bubbleLength*11 });//初始化 $focusBubble.on("click","li",function(){ $(this).addClass("current").siblings().removeClass("current"); _index=$(this).index(); changeImg(_index); });//点击轮换 $prevBnt.on("click",function(){ _index++ if(_index>bannerLength-1){ _index=0; } changeImg(_index); });//下一张 $nextBnt.on("click",function(){ _index-- if(_index<0){ _index=bannerLength-1; } changeImg(_index); });//上一张 function changeImg(_index){ $bannerList.eq(_index).fadeIn(250); $bannerList.eq(_index).siblings().fadeOut(200); $focusBubble.find("li").removeClass("current"); $focusBubble.find("li").eq(_index).addClass("current"); clearInterval(_timer); _timer=setInterval(function(){$nextBnt.click()},5000) }//切换主函数 _timer=setInterval(function(){$nextBnt.click()},5000); function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } if(!isIE()){ $(window).resize(function(){ window.location.reload(); }); }else{ if(!+'v1' && !'1'[0]){ alert("老铁什么年代啦还在搞ie8以下版本啊！") } else{ $(window).resize(function(){ window.location.reload(); }); }; } }(); }) /*banner end*/