jQuery上下滚动banner广告代码
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>jQuery上下滚动banner广告代码</title>
<LINK rel=stylesheet type=text/css href="//xcdn.php.cn/js/ads/jQuery上下滚动banner广告代码/css/lrtk.css">
<SCRIPT type=text/javascript src="//xcdn.php.cn/js/ads/jQuery上下滚动banner广告代码/js/jquery-1.4.2.min2.js"></SCRIPT>
</HEAD>
<BODY>
<DIV id=container class=banner>
<OL>
<LI><A href="#" target=_blank><IMG src="//xcdn.php.cn/js/ads/jQuery上下滚动banner广告代码/images/01.jpg"></A></LI>
<LI><A href="#" target=_blank><IMG src="//xcdn.php.cn/js/ads/jQuery上下滚动banner广告代码/images/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值,隐藏第一行
_field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
});
});
</script>
<div style="text-align:left;clear:both">
<br />
<p>来源：<a href="#" target="_blank">牛牛论坛</a> </p>
</div>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
页:
[1]