特效描述：单排图片 无缝滚动。js单排图片无缝滚动特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="scrollver.js"></script>
2. HTML代码
<h2 align="center" style="margin:20px 0;font-size:14px;">javascript 特效 图片内容滚动插件 支持单排图片上下无缝自动滚动 和 图片上下连续自动滚动</h2>
<div class="warrper">
<div id="container">
<div id="message">
<ul>
<li>
<a title="javascript特效多功能选项卡自动切换内容图片延迟加载" href="http://www.51qianduan.com/"><img width="150" height="150" alt="javascript特效多功能选项卡自动切换内容图片延迟加载" src="images/small546ee4ae135fdeec7f6b0eb9a16b3440.jpg" />
<div>javascript特效多功能选项卡自动切换内容图片延迟加载</div></a>
</li>
<li>
<a title="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" href="http://www.51qianduan.com/"><img width="150" height="150" alt="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="images/small93f0fbcca20b400dfab9522431cc9de0.jpg" />
<div>jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</div></a>
</li>
<li>
<a title="jquery特效制作 slide 图片窗帘式滚动" href="http://www.51qianduan.com/"><img width="150" height="150" alt="jquery特效制作 slide 图片窗帘式滚动" src="images/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" />
<div>jquery特效制作 slide 图片窗帘式滚动 效果酷炫</div></a>
</li>
</ul>
<ul>
<li>
<a title="用jquery特效制作一个简单的图像预览" href="http://www.51qianduan.com/"><img width="150" height="150" alt="用jquery特效制作一个简单的图像预览" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" />
<div>用jquery特效制作一个简单的图像预览</div></a>
</li>
<li>
<a title="用jquery特效制作图片金字塔式放大缩小展示" href="http://www.51qianduan.com/"><img width="150" height="150" alt="用jquery特效制作图片金字塔式放大缩小展示" src="images/smallaa6d7f26f941d87728eb0716d36d9cbe.jpg" />
<div>用jquery特效制作图片金字塔式放大缩小展示</div></a>
</li>
<li>
<a title="纯CSS下拉菜单" href="http://www.51qianduan.com/"><img width="150" height="150" alt="纯CSS下拉菜单" src="images/smallee9241175b1e38b5df271a9f2f67034d.jpg" />
<div>纯CSS下拉菜单导航特效兼容IE6和IE6+以上</div></a>
</li>
</ul>
</div>
</div><!--container end-->
</div><!--warrper end-->
<h2 align="center" style="margin:20px 0;font-size:14px;">javascript 特效 图片内容滚动插件 图片单排上下连续自动滚动</h2>
<div id="jsfoot_scroll">
<div>
<h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" alt="用jquery特效制作一个简单的图像预览"></a></h4>
<dl>
<dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt>
<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
</dl>
</div>
<div>
<h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" alt="javascript特效按钮控制图片左右自动滚动" src="images/small6ae21c4c44285e9a58afd5c3f42ae36f.jpg"></a></h4>
<dl>
<dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt>
<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
</dl>
</div>
<div>
<h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" alt="用CSS3更换一个确认对话框的jQuery特效" src="images/small79b7ec4e3a48d1f0b125bcbd6bed0fb2.jpg"></a></h4>
<dl>
<dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt>
<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
</dl>
</div>
<div>
<h4 class="img"><a href="http://www.51qianduan.com/"><img width="90" height="60" alt="旋转幻灯片使用jQuery和CSS3" src="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a></h4>
<dl>
<dt><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dt>
<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
</dl>
</div>
</div><!--jsfoot_scroll end-->
<script language="javascript">
var $ = function (d){
typeof d == "string" &&(d = document.getElementById(d));
return $.fn.call(d);
};
$.fn = function (){
this.$ADD = function (fn){CLS.add(this,fn)};
this.addEvent = function (sEventType,fnHandler){
if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
else {this["on" + sEventType] = fnHandler;}
}
this.removeEvent = function (sEventType,fnHandler){
if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
else { this["on" + sEventType] = null;}
}
return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
initialize: function(id,name,out,speed) {
this.name = name;
this.box = $(id);
this.out = 3;//滚动间隔时间,单位秒
this.speed = speed;
this.d = 1;
this.box.style.position = "relative";
this.box.scrollTop = 0;
var _li = this.box.firstChild;
while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
this.lis = this.box.getElementsByTagName(_li.tagName);
this.len = this.lis.length;
for(var i=0;i<this.lis.length;i++){
var __li = document.createElement(_li.tagName);
__li.innerHTML = this.lis[i].innerHTML;
this.box.appendChild(__li);
if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
}
this.Start();
this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
this.box.addEvent("mouseout",Bind(this,this.Start,[]));
},
Start:function (){
clearTimeout(this.timeout);
this.timeout = setTimeout(this.name+".Up()",this.out*1000)
},
Up:function(){
clearInterval(this.interval);
this.interval = setInterval(this.name+".Fun()",10);
},
Fun:function (){
this.box.scrollTop+=this.speed;
if(this.lis[this.d].offsetTop <= this.box.scrollTop){
clearInterval(this.interval);
this.box.scrollTop = this.lis[this.d].offsetTop;
this.Start();
this.d++;
}
if(this.d >= this.len + 1){
this.d = 1;
this.box.scrollTop = 0;
}
}
};
$(window).addEvent("load",function (){
marquee = new Marquee("jsfoot_scroll","marquee",1,2);
});
</script>
