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>