您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery广告代码特效 > 正文

上下滚动图片jQuery的banner广告代码

2014-01-16 08:01:48 作者:天外飞仙 人气:2124 Views

上下滚动图片jQuerybanner广告代码
上下滚动图片jQuery的banner广告代码
部分jq代码

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

天外飞仙的在线效果DEMO

链接:http://www.jqueryba.com/1961.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!