<!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实现幻灯片
最新推荐文章于 2019-04-01 15:17:46 发布