<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;font-family:"",Verdana, Arial;line-height:100%;color:#5a5a5a;}
.warrper{margin:20px auto;border:solid 1px #ddd;height:167px;width:710px;}
h1,h2,h3,h4,h5,h6,p,select,td{margin:0;padding:0;font-size:12px;}
a{color:#5e5e5e;text-decoration:none;}
a:hover{color:#00a4eb;text-decoration:none;}
/* container */
#container{position:relative;height:160px;overflow:hidden;}
#container ul{overflow:hidden;clear:both;height:160px;}
#container li{float:left;text-align:center;padding:0;margin-left:27px;margin-top:7px;height:153px;display:inline;width:200px;}
#container li a{display:block;float:left;height:151px;}
#container li a img{width:128px;height:110px;padding:2px;border:1px solid #ddd;}
#container li a div{line-height:18px;width:200px;}
#container li a:hover img{border:solid 1px #00a4eb;}
/* jsfoot_scroll */
#jsfoot_scroll{width:232px;height:182px;overflow:hidden;border-left:dashed 1px #ddd;border-right:dashed 1px #ddd;border-top:dashed 1px #ddd;margin:0 auto;}
#jsfoot_scroll div{width:100%;height:64px;float:left;padding:13px 0 14px;font-weight:normal;background:url(images/dotted.gif) repeat-x bottom;}
#jsfoot_scroll div .img{width:94px;height:64px;float:left;}
#jsfoot_scroll div .img img{width:90px;height:60px;}
#jsfoot_scroll div dl{width:128px;height:64px;float:right;}
#jsfoot_scroll div dt{width:100%;float:left;line-height:22px;font-weight:bold;}
#jsfoot_scroll div dd{width:100%;float:left;line-height:21px;}
</style>
<script type="text/javascript" src="scrollver.js"></script><!--javascript 图片滚动插件-->
<script type="text/javascript">
function init_Scroll(){
var scrollPics = new scrollVertical('container','message','ul');
scrollPics.speed = 10; /* 调节speed值可以改变滚动间隙 */
scrollPics.isPause = true;
var timer_start = setTimeout(function(){clearTimeout(timer_start);scrollPics.isPause = false;},2000);
Event.addEvent(scrollPics.scrollArea,"mouseover",function(){scrollPics.isPause = true;});
Event.addEvent(scrollPics.scrollArea,"mouseout",function(){scrollPics.isPause = false;});
}
Event.addEvent(window,'load',init_Scroll);
</script>
</head>
<body>
<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.17sucai.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.17sucai.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.17sucai.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.17sucai.com/"><img width="150" height="150" alt="用jquery特效制作一个简单的图像预览" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" />
<div>用jquery特效制作一个简单的图像预览</div></a>
</li>
<li>
<a title="用jquery特效制作图片金字塔式放大缩小展示" href="http://www.17sucai.com/"><img width="150" height="150" alt="用jquery特效制作图片金字塔式放大缩小展示" src="images/smallaa6d7f26f941d87728eb0716d36d9cbe.jpg" />
<div>用jquery特效制作图片金字塔式放大缩小展示</div></a>
</li>
<li>
<a title="纯CSS下拉菜单" href="http://www.17sucai.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.17sucai.com/"><img width="90" height="60" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" alt="用jquery特效制作一个简单的图像预览"></a></h4>
<dl>
<dt><a href="http://www.17sucai.com/">jquery 特效</a></dt>
<dd><a href="http://www.17sucai.com/">用jquery特效制作一个简单的图像预览</a></dd>
</dl>
</div>
<div>
<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" alt="javascript特效按钮控制图片左右自动滚动" src="images/small6ae21c4c44285e9a58afd5c3f42ae36f.jpg"></a></h4>
<dl>
<dt><a href="http://www.17sucai.com/">javascript 特效</a></dt>
<dd><a href="http://www.17sucai.com/">javascript特效按钮控制图片左右自动滚动</a></dd>
</dl>
</div>
<div>
<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" alt="用CSS3更换一个确认对话框的jQuery特效" src="images/small79b7ec4e3a48d1f0b125bcbd6bed0fb2.jpg"></a></h4>
<dl>
<dt><a href="http://www.17sucai.com/">css3 特效</a></dt>
<dd><a href="http://www.17sucai.com/">用CSS3更换一个确认对话框的jQuery特效</a></dd>
</dl>
</div>
<div>
<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" alt="旋转幻灯片使用jQuery和CSS3" src="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a></h4>
<dl>
<dt><a href="http://www.17sucai.com/">html5 特效</a></dt>
<dd><a href="http://www.17sucai.com/">旋转幻灯片使用jQuery和CSS3</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);
javascript 特效 图片内容滚动插件 支持单排图片上下无缝自动滚动 和 图片上下连续自动滚动
5星 · 超过95%的资源 需积分: 41 93 浏览量
2014-05-27
09:57:08
上传
评论
收藏 72KB RAR 举报 
.rar （13个子文件） 
图片滚动 images 
small79b7ec4e3a48d1f0b125bcbd6bed0fb2.jpg 4KB smallee9241175b1e38b5df271a9f2f67034d.jpg 2KB small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg 6KB small93f0fbcca20b400dfab9522431cc9de0.jpg 6KB smallf2a366c8954d666360c4b214940963cf.jpg 5KB smallbb276cedeaeb0438ed3275a9711b1d69.jpg 4KB
Thumbs.db 36KB smallaa6d7f26f941d87728eb0716d36d9cbe.jpg 6KB
dotted.gif 90B small546ee4ae135fdeec7f6b0eb9a16b3440.jpg 5KB small6ae21c4c44285e9a58afd5c3f42ae36f.jpg 4KB scrollver.js 8KB
demo.html 9KB资源评论
xqy_yang2016-02-02不错哦支持
瑶怪2016-04-24很好。代码很详细，感谢！- songyyyyyy2018-11-29参考了，多谢分享
happy阳雪2014-09-17对于我来说，写的太高端了，没看懂，所以也没采用。不过还是感谢楼主分享
