您的位置：首页 > Web前端 > JQuery

jQuery setTimeout实现幻灯片

2013-04-05 04:06 387 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航