----------代码----------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div id="gg"></div>
<script type="text/javascript">
//第一个图集
new createScroll(
"images/lg03.jpg"
,"images/lg16.jpg"
);
//第一个图集
new createScroll(
"images/lg03.jpg"
,'<a href="http://qidizi.com"><img src="images/lg16.jpg"></a>'
,{deriction:'r'}
);
//第一个图集
new createScroll(
"images/lg03.jpg"
,"images/lg16.jpg"
,{deriction:'t'}
);
//第一个图集
new createScroll(
"images/lg03.jpg"
,"images/lg16.jpg"
,{deriction:'b'}
);//第一个图集
createScroll(
"http://hiphotos.baidu.com/qidizi/pic/item/ea1cbc0dcde024ba3ac7631d.jpg"
,'http://img.baidu.com/hi/logo/logo_msg_250.gif'
,'http://img.baidu.com/hi/logo/logo_msg_250.gif'
,'http://img.baidu.com/hi/logo/logo_msg_250.gif'
, "http://hiphotos.baidu.com/qidizi/pic/item/ea1cbc0dcde024ba3ac7631d.jpg"
,"http://hiphotos.baidu.com/qidizi/pic/item/ea1cbc0dcde024ba3ac7631d.jpg"
,"http://hiphotos.baidu.com/qidizi/pic/item/ea1cbc0dcde024ba3ac7631d.jpg"
,{bind:'fff'}
);
/*
* 自动创建无跳动滚动对象,支持任何内容的滚动,滚动形式有像素级和延时翻页式
* 调用形式有下面三种:
* createScroll([ '图片路径或html 1', '图片路径或html 2',..., '图片路径或html N', {delay:3, clas:'td li',..., deriction:'l'} ]);//数组|动态创建|滚动对象形式
* createScroll( '图片路径或html 1', '图片路径或html 2',..., '图片路径或html N', {delay:3, clas:'td li',..., deriction:'l'} );//普通|动态创建|滚动对象形式
* createScroll( {scroller:'要滚动内容外框id',delay:3, clas:'td li',..., deriction:'l'} );//|指定|已创建出来的对象进行滚动形式
* 参数说明:
* 参数接受N个'图片路径或html' + 一个参数对象(必须放最后,且可省,各自值瞧默认值)
*
* '图片路径或html':字符串,如果不包含<号,就认为是img路径,将自动变成<img src='图片路径' />,是html时,直接使用
* delay:数字,滚动一次px间隔(单位是毫秒,默认30);
* sleep:大于0数字表示间歇(间歇单位是秒,默认3)式翻页方式,其它值表示像素级不停滚动,注意设置sleep尽量大(5以上),delay尽量小,否则效果看起来跟像素滚动一样.
* px:大于0整数,滚动一次多少像素,默认是1像素
* clas:字符串,最外层div样式类名,默认createScroll(不用class,是因为在ie8中会出现错误)
* id:字符串,自指定外框id(如果已存在将采用内定id),默认使用内定id
* scroller:字符串,要对它的子内容进行滚动的对象的id,如果指定这个,请不要再提供'图片路径或html',不存在出错,可以配合bind进行把scroller内容复制到bind中滚动,达到一份复制多处滚动
* width:数字,单位是px值,默认是100,提示,只有左右滚动时才用(高度自适应)
* height:数字,单位是px值,默认是100,只有上下滚动时才用(宽度自适应)
* limit:数字,排数,默认所有内容在一排
* bind:字符串,需要绑定的id,默认是以document.write方式创建图区(只有在页面载入完成前,否则已显示出来的内容将被消除),如果需要插入到指定对象子元素最后方式创建请指定已存在的对象的id,以增加子方式创建
* deriction:字符串,有'l','r','b','t';分别对应(向左,向右,向下,向上),默认是'l'(向左滚动)
*/
CHRD.scroll.normal = function() {
var getObj = function(id) { return document.getElementById(id); }
if (! arguments.length || ! arguments[0]) {
return alert('createScroll()未提供参数/参数非法/第一个参数为false(空串)');
}
var argsCopy = arguments[0].constructor == [].constructor ? arguments[0] : arguments;//转数组参数成正常的.
var args = [];
var obj = null;
var tmp;
for (var i = 0; i < argsCopy.length; i++) {//不能使用for in格式,有些系统不支持,它会认为没有任何可用的对象,直接跳过
tmp = argsCopy[i].constructor;
if (tmp == ''.constructor) {
if (/^\W*$/.test(argsCopy[i])) {
alert('要创建的内容有空白串,已扔弃');
continue;
}
if (argsCopy[i].indexOf('<') > -1) {
args.push(argsCopy[i]);//html
} else {
args.push('<img src="' + argsCopy[i] + '" border="0" title="' + argsCopy[i] + '" />');//图片路径
}
} else if (tmp == {}.constructor){
if (obj) {
return alert('配置对象参数不允许出现多次');
} else {
obj = argsCopy[i];
}
} else {
return alert('参数只允许出现字符串和{}对象');
}
}
if (obj.scroller) {//指定内容
if (args.length) {
return alert('指定滚动内容对象时,请不要再传递内容来创建');
} else if (! getObj(obj.scroller)) {
return alert('指定滚动内容对象(id=' + obj.scroller + ')不存在');
}
obj.scroller = getObj(obj.scroller);
} else if (! args.length) {//传递内容,且至少一个
return alert('要创建滚动内容时,至少要传递一个内容');
} else if ('complete' == document.readyState) {
return alert('页面载入完成了,你必须使用bind参数来指定要插入滚动元素的对象,而不能再使用document.write方式,那将会清空页面内容');
}
window.createScrollCount = window.createScrollCount ? window.createScrollCount + 1 : 1;//配合生成唯一id
obj.delay = isNaN(obj.delay) || (obj.delay < 1) ? 30 : obj.delay * 1;
obj.limit = isNaN(obj.limit) || (obj.limit < 1) ? 1 : obj.limit * 1;
obj.px = isNaN(obj.px) || (obj.px < 1) ? 1 : obj.px * 1;
obj.deriction = '.l.r.b.t.'.indexOf('.' + obj.deriction + '.') < 0 ? 'l' : obj.deriction;//默认是图向左动
var to = '.b.t.'.indexOf('.' + obj.deriction + '.') > -1 ? 'y' : 'x';
var tab = '<table style="border-collapse:collapse; border-spacing:0px;padding:0px; margin:0px;">\n';
var sleeper = 'createScroller' + window.createScrollCount;
if (to == 'x') {
obj.width = 'width:' + (isNaN(obj.width) || (obj.width < 1) ? 100 : obj.width) + 'px;';
if (obj.height > 0) {
alert('多余参数:左右滚动时不必设置height');
}
} else {
obj.height = 'height:' + (isNaN(obj.height) || (obj.height < 1) ? 100 : obj.height) + 'px;';
if (obj.width > 0) {
alert('多余参数:上下滚动不必设置width');
}
}
if (obj.id) {
if (! getObj(obj.id)) {
return alert(obj.id + '对象不存在');
}
} else {
obj.id = 'createScroll' + window.createScrollCount;
}
if (obj.bind) {
obj.bind = getObj(obj.bind);
if (! obj.bind) {
return alert('参数bind指定的对象不存在');
}
}
var mkContent = function () {//拼接内容
var span = tab + '<tr>\n';
var al = args.length;
var less = al % obj.limit;//平均分排后还余出
var count = Math.floor(al / obj.limit);//每排至少放多少个.
/*
* 关于多排有余递减算法:根据总排数计算出每排至少放n个,如果有余数,那么前面的排数就是n+1个,直到余数用完;
*/
if ('x' == to) {//横向
var br = count;
if (less > 0) {//有余数
br++;//n+1情况
less--;
}
for (var i = 0; i < al; i++) {
span += '<td>' + args[i] + '</td>\n';
//换排检查
if ( (obj.limit > 1) //要求多排
&& (i + 1 == br) //到了换排点
&& (i < al - 1) //最后排不需要
) {//必须换排
span += '\n</tr>\n<tr>\n';//新排
br += count;//指向下个断排点
if (less > 0) {//还是n+1情况
less--;
br++;
}
}
}
span += '\n</tr>\n</table>\n';
} else {//立向
for (var i = 0; i < al; i++) {
span += '<td>' + args[i] + '</td>\n';
//换排检查
if ( (obj.limit == 1)
&& (i < al - 1) //最后排不需要
) {//单排
span += '\n<tr/>\n<tr>\n';//新排
} else if (
i > 0 //第二排起
&& ( (i + 1) % obj.limit == 0) //到了换排点
&& (i < al - 1) //最后排不需要
) {//必须换行
span += '\n<tr/>\n<tr>\n';//新排
}
}
span += '\n</tr>\n</table>\n';
}
return span;
}
var cpContent = function() {//复制替换子内容
return obj.scroller.innerHTML;
}
var content = obj.scroller ? cpContent() : mkContent();
content = tab + '<tr style="padding:0px; margin:0px;">\n<td style="padding:0px; margin:0px;">'
+ content + ('x' == to ? '</td>\n<td style="padding:0px; margin:0px;">' : '</td>\n</tr>\n<tr style="padding:0px; margin:0px;">\n<td style="padding:0px; margin:0px;">')
+ content + '</td>\n</tr>\n</table>\n'//生成二块图区
if (obj.bind) {//在最后插入子元素形式
span = document.createElement('DIV');
span.setAttribute('onmouseover', "this.mouseIn = 1");
span.setAttribute('onmouseout', "this.mouseIn = 0");
span.style['overflow' + (to == 'x' ? 'X' : 'Y')] = 'hidden';
span.style.padding = '0px';
span.style.margin = '0px';
obj.className = obj.clas ? obj.clas : 'createScroll';
span.id = obj.id;
span.innerHTML = content;
obj.bind.appendChild(span);
} else if (obj.scroller) {//替换形式
obj.scroller.innerHTML = '<div οnmοuseοver="this.mouseIn = 1" οnmοuseοut="this.mouseIn = 0" style="overflow-' + (to == 'x' ? 'x' : 'y') + ':hidden;'
+ (to == 'x' ? obj.width : obj.height)
+ ' padding:0px; margin:0px;" class="' + (obj.clas ? obj.clas : 'createScroll') + '" id="' + obj.id + '">'//不要在div和table之间加其它空格之类.防止获取table失败
+ content
+ '</div>';
} else {//以页面初始化时插入方式.
document.write(content);
}
/*
* 滚动的"从头开始"跳转无缝效果是让浏览器一下跳到跟跳转前相同的画面处,但是进度条已经变化,所以需要二块相同的区域
*/
var scroller = getObj(obj.id);
if (! scroller) {
return alert('获取滚动对象失败');
}else if (scroller.firstChild.tagName.toLowerCase() != 'table') {
return alert('获取滚动对象中的table失败');
}
if ('x' == to) {//设置自适应
//scroller.style.height = getObj(obj.id).firstChild.offsetHeight + 'px';
if (scroller.offsetWidth >= scroller.firstChild.offsetWidth / 2) {//如果可视区域大于滚动内容
scroller.firstChild.rows[0].cells[1].style.display = 'none';//不显示复制
return;
}
} else {
//scroller.style.width = getObj(obj.id).firstChild.offsetWidth + 'px';
if (scroller.offsetHeight >= scroller.firstChild.offsetHeight / 2) {//如果可视区域大于滚动内容
scroller.firstChild.rows[1].style.display = 'none';//不显示复制
return;
}
}
/*
* 方向滚动计算
* 向左
* 滚动条+1向右边拉,图向左动
* 临界点为拉到>=中间时,恢复到0;
* ---------
* 向右
* 滚动条-1向左拉,图向右动
* 临界点为拉到<=0时,恢复到中间
* ---------
* 向上
* 滚动条+1向下拉,图向上动
* 临界点为拉到>=中间时,恢复到0
* ---------
* 向下
* 滚动条-1向上拉,图向下动
* 临界点为拉到<=0,恢复到中间
*/
switch(obj.deriction) {
case 'l':
if (obj.sleep > 0) {
var moveFunc = function () {
if (! scroller.mouseIn) {
var rows = scroller.firstChild.rows;
scroller.scrollLeft += rows[0].cells[1].offsetLeft - scroller.scrollLeft <= 0 ? -rows[0].cells[0].offsetWidth : obj.px;
if (++window[sleeper + 'c'] > scroller.offsetWidth) {//此标在时,将不算
clearInterval(window[sleeper]);
}
}
}
} else {
var moveFunc = function () {
if (! scroller.mouseIn) {
var rows = scroller.firstChild.rows;
scroller.scrollLeft += rows[0].cells[1].offsetLeft - scroller.scrollLeft <= 0 ? -rows[0].cells[0].offsetWidth : obj.px;
}
}
}
break;
case 'r':
if (obj.sleep > 0) {
var moveFunc = function () {
if (! scroller.mouseIn) {
var td1 = scroller.firstChild.rows[0].cells[0];
scroller.scrollLeft += scroller.scrollLeft - td1.offsetLeft <= 0 ? td1.offsetWidth : -obj.px;
if (++window[sleeper + 'c'] > scroller.offsetWidth){clearInterval(window[sleeper]);}
}
}
} else {
var moveFunc = function () {
if (! scroller.mouseIn) {
var td1 = scroller.firstChild.rows[0].cells[0];
scroller.scrollLeft += scroller.scrollLeft - td1.offsetLeft <= 0 ? td1.offsetWidth : -obj.px;
}
}
}
break;
case 't':
if (obj.sleep > 0) {
var moveFunc = function () {
if (! scroller.mouseIn) {
var rows = scroller.firstChild.rows;
scroller.scrollTop += rows[1].offsetTop - scroller.scrollTop <= 0 ? -rows[0].offsetHeight : obj.px;
if (++window[sleeper + 'c'] > scroller.offsetHeight){clearInterval(window[sleeper]);}
}
}
} else {
var moveFunc = function () {
if (! scroller.mouseIn) {
var rows = scroller.firstChild.rows;
scroller.scrollTop += rows[1].offsetTop - scroller.scrollTop <= 0 ? -rows[0].offsetHeight : obj.px;
}
}
}
break;
case 'b':
if (obj.sleep > 0) {
var moveFunc = function () {
if (! scroller.mouseIn) {
var td1 = scroller.firstChild.rows[0];
scroller.scrollTop += scroller.scrollTop - td1.offsetTop <= 0 ? td1.offsetHeight : -obj.px
if (++window[sleeper + 'c'] > scroller.offsetHeight){clearInterval(window[sleeper]);}
}
}
} else {
var moveFunc = function () {
if (! scroller.mouseIn) {
var td1 = scroller.firstChild.rows[0];
scroller.scrollTop += scroller.scrollTop - td1.offsetTop <= 0 ? td1.offsetHeight : -obj.px
}
}
}
break;
}
if (obj.sleep > 0) {//页动
setInterval(function() {
window[sleeper + 'c'] = 0;
clearInterval(window[sleeper]);
window[sleeper] = setInterval(moveFunc, obj.delay);
}, obj.sleep * 1000);
} else {//像素动
setInterval(moveFunc, obj.delay);
}
}
</script>
</body>
</html>----------------------------
因为想弄成通用点的自动生成代码.所以,也想代码"通用"点,写出来的代码比较难理解.有些逻辑不是很显眼.
亮点是不倒退式一直前滚动,翻页+像素滚动
标签：obj,翻页,scroller,16,else,ff,var,滚动,id From： https://blog.51cto.com/u_252283/6181041