<!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> <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery特效,css羣:276358738,js touch觸屏特效,視頻教程</title> <link href="/myweb/net163/template/net163/cssjs/2013/03/settimeout/css/163css.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/js/jquery.min.js"></script> <script type="text/javascript"> var timer; var i=-1; var offset=3000; function roll(){ i++; if(i>3){ i=0; } slide(i); timer=setTimeout(roll,offset) } function slide(i){ $('.big a').eq(i).fadeIn().siblings().hide(); $('.num li').eq(i).siblings().removeClass('on'); $('.num li').eq(i).addClass('on'); } function stopBig(){ $('.big').hover(function(){ clearTimeout(timer); },function(){ timer=setTimeout(roll,offset); }); } function stoproll(){ $('.num li').hover(function(){ clearTimeout(timer); i=$(this).index(); slide(i); },function(){ timer=setTimeout(roll,offset); }) } $(function(){ roll(); stoproll(); stopBig() }) </script> </head> <body> <div class="box-163css"> <div class="txtbg"> </div> <div class="big"> <a href="#" style="display:block"><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/1.jpg" /><span>人再囧途之泰囧</span></a> <a href="#"><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/2.jpg" /><span>愛情自有天意</span></a> <a href="#"><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/3.jpg" /><span>華麗一族</span></a> <a href="#"><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/4.jpg" /><span>星際迷航:暗黑無界 國際版預告 女船員露春光</span></a> </div> <ul class="num"> <li class="on"><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/1s.jpg" /></li> <li><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/2s.jpg" /></li> <li><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/3s.jpg" /></li> <li><img src="/myweb/net163/template/net163/cssjs/2013/03/settimeout/images/4s.jpg" /></li> </ul> </div> </body> </html>
jQuery setTimeout實現幻燈片
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章