<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery带停顿效果的单行文字滚动-www.update8.com</title> <script type="text/javascript" src="http://www.update8.com/images/js/jquery.min.js"></script> <script type="text/javascript"> ;(function($){ $.fn.extend({ "myFocus": function(opts){ opts= $.extend({ thumbObj:null, auto:true, changeTime:3000, speed:400, type:"left" }, opts || {}); var obj = $(this), parent=obj.parent(); pObj=obj.parent().attr("id"); len = obj.length, nextOne=0, d=1, oLiwid=obj.eq(0).outerWidth(), oLiHeight=obj.eq(0).outerHeight(), timer=null; //提前判断以防鼠标移动导航上出现bug if(opts.type=="top"){ parent.height(len*obj.eq(0).outerHeight()); }else{ obj.css("float","left"); parent.width(len*obj.eq(0).outerWidth()); } //切换方式的方法 function change(){ if(opts.type=="top"){ parent.animate({marginTop:"-"+(oLiHeight*nextOne)+"px"},opts.speed); return d=0; }else{ parent.animate({marginLeft:"-"+(oLiwid*nextOne)+"px"},opts.speed); } } change(); //鼠标移到导航按钮上的效果 $(opts.thumbObj).hover(function(){ clearInterval(timer); timer=null; var index=$(this).index(); $(this).addClass("curr").siblings().removeClass("curr"); $("#"+pObj+":animated").stop(); // if(d){ parent.animate({marginLeft:"-"+(oLiwid*index)+"px"},opts.speed); }else{ parent.animate({marginTop:"-"+(oLiHeight*index)+"px"},opts.speed); } },function(){ if(timer){ clearInterval(timer); timer=null; } if(opts.auto){ timer=setInterval(autoPlay,opts.changeTime); }; }); //鼠标移到大图上效果 obj.hover(function(){ clearInterval(timer); timer=null; },function(){ if(timer){ clearInterval(timer); timer=null; } if(opts.auto){ timer=setInterval(autoPlay,opts.changeTime); }; }); //自动切换方法 function autoPlay(){ nextOne++; if(nextOne>=len){ nextOne=0; } $(opts.thumbObj).eq(nextOne).addClass("curr").siblings().removeClass("curr"); change(); } // clearInterval(timer); timer=null; if(opts.auto){ timer=setInterval(autoPlay,opts.changeTime); }; } }); })(jQuery); $(function(){ $("#box li").myFocus({ type:"top" }); }); </script> <style type="text/css"> * { padding:0; margin:0; } ul,li { list-style:none; } #box { height:18px; width:300px; overflow:hidden; margin:50px auto;} </style> </head> <body> <div id="box"> <ul> <li>昨夜寒蛩不住鸣，</li> <li>惊回千里梦，已三更。</li> <li>起来独自绕阶行，</li> <li>人悄悄帘外月胧明，</li> <li>白首为功名，旧山松竹老，阻归程</li> <li>欲将心事付瑶琴，</li> <li>知音少，玄断有谁听。</li> </ul> </div> <div style="width:728px;margin:10px auto; overflow:hidden;"> <script src='http://www.update8.com/plus/ad_js.php?aid=10023' language='javascript'></script> </div> </body> </html> (www.update8.com)提示：可修改后代码再运行!
