轮播图jquery
jquery轮播
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>banner</title> <!--引入开始--> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{zoom:1;} ul, li{list-style:none;} img{border:0;} .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} /* 核心代码 */ .focus{width:800px;height:280px;overflow:hidden;position:relative;} .focus ul{height:380px;position:absolute;} .focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} .focus ul li div{position:absolute;overflow:hidden;} .focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:5px;text-align:center;} .focus .btn span{display:inline-block;_display:inline;_zoom:1;width:13px;height:13px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius:50%;} .focus .btn span.on{background:yellow;} .focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;display:none;} .focus .pre{left:0;} .focus .next{right:0;background-position:right top;} </style> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/Tony_Tab.js"></script> </head> <body> <div style="width:800px; margin:50px auto;"> <div id="focus" class="focus"> <ul> <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li> </ul> </div> </div> <div style="width:800px; margin:50px auto;"> <div id="focus2" class="focus"> <ul> <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li> </ul> </div> </div> <div style="width:800px; margin:50px auto;"> <div id="focus3" class="focus"> <ul> <li><a href="JavaScript:;"><img src="img/01.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/02.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/03.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/04.jpg"/></a></li> <li><a href="JavaScript:;"><img src="img/05.jpg"/></a></li> </ul> </div> </div> <script type="text/javascript"> $(function() { $('#focus').slideFocus(); $('#focus2').slideFocus(); $('#focus3').slideFocus(); }); </script> </body> </html>
jQuery.fn.extend({ slideFocus: function(){ var This = $(this); var sWidth = $(This).width(), len =$(This).find('ul li').length, index = 0, Timer; // btn event var btn = "<div class='btn'>"; for(var i=0; i < len; i++) { btn += "<span></span>"; }; btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; $(This).append(btn); $(This).find('.btn span').eq(0).addClass('on'); $(This).find('.btn span').mouseover(function(){ index = $(This).find('.btn span').index(this); Tony(index); }); $(This).find('.next').click(function(){ index++; if(index == len){index = 0;} Tony(index); }); $(This).find('.pre').click(function(){ index--; if(index == -1){index = len - 1;} Tony(index); }); // start setInterval $(This).find('ul').css("width",sWidth * (len)); $(This).hover(function(){ clearInterval(Timer); show($(This).find('.preNext')); },function(){ hide($(This).find('.preNext')); Timer=setInterval(function(){ Tony(index); index++; if(len == index){index = 0;} }, 2000) }).trigger("mouseleave"); function Tony(index){ var new_width = -index * sWidth; $(This).find('ul').stop(true,false).animate({'left' : new_width},300); $(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on'); }; // show hide function show(obj){ $(obj).stop(true,false).fadeIn();} function hide(obj){ $(obj).stop(true,false).fadeOut();} } });
