<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!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 content="text/html; charset=gb2312" http-equiv="Content-Type">
<STYLE type="text/css">
body{position:relative;margin:0;padding:55px 0 0 0;}
</STYLE>
<TITLE>支持上下翻滚的jquery广告特效代码_特效脚本 js.itobe.cn</TITLE><LINK rel="stylesheet"
type="text/css" href="index_files/css.css">
<SCRIPT type="text/javascript" src="index_files/jquery-1.4.2.min2.js"></SCRIPT>
<META name="GENERATOR" content="MSHTML 9.00.8112.16496"></HEAD>
<BODY ondragstart="return false" oncontextmenu="return false"><BR><BR><BR><BR>
<DIV style="margin: 0px auto;" id="container" class="banner">
<OL>
<LI><A href="http://www.jb51.net/" target="_blank"><IMG src="index_files/01.jpg"></A></LI>
<LI><A href="http://www.jb51.net/" target="_blank"><IMG src="index_files/02.jpg"></A></LI></OL>
<DIV class="mouse_direction">
<DIV class="mouse_top"></DIV>
<DIV class="mouse_bottom"></DIV></DIV></DIV>
<SCRIPT type="text/javascript">
$(function() {
var index = 0;
var adtimer;
var _wrap = $("#container ol"); //
var len = $("#container ol li").length;
//len=1;
if (len > 1) {
$("#container").hover(function() {
clearInterval(adtimer);
},
function() {
adtimer = setInterval(function() {
var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
var _h = _field.height(); //取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_field.animate({
marginTop: -_h + 'px'
},
500,
function() { //通过取负margin值,隐藏第一行
_field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},
5000);
}).trigger("mouseleave");
function showImg(index) {
var Height = $("#container").height();
$("#container ol").stop().animate({
marginTop: -_h + 'px'
},
1000);
}
$("#container").mouseover(function() {
$("#container .mouse_direction").css("display", "block");
});
$("#container").mouseout(function() {
$("#container .mouse_direction").css("display", "none");
});
}
$("#container").find(".mouse_top").click(function() {
var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
var last = _wrap.find('li:last'); //此变量不可放置于函数起始处,li:last取值是变化的
//last.prependTo(_wrap);
var _h = last.height();
$("#container ol").css('marginTop', -_h + "px");
last.prependTo(_wrap);
$("#container ol").animate({
marginTop: 0
},
500,
function() { //通过取负margin值,隐藏第一行
//$("#container ol").css('marginTop',0).prependTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
});
$("#container").find(".mouse_bottom").click(function() {
var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
var _h = _field.height();
_field.animate({
marginTop: -_h + 'px'
},
500,
function() { //通过取负margin值,隐藏第一行 http://js.itobe.cn/
_field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
});
});
<BR><BR><BR><BR>
</BODY></HTML>
基于jQuery实现的上下翻转滚动的广告效果源码.zip
版权申诉
171 浏览量
2022-11-10
00:24:35
上传
评论
收藏 75KB ZIP 举报
基于jQuery实现的上下翻转滚动的广告效果源码.zip （6个子文件） 
132686995034908033 index_files 
01.jpg 28KB
css.css 732B jquery-1.4.2.min2.js 70KB 02.jpg 33KB images 
direction_icon.png 2KB index.htm 4KB资源评论
