JS图片无缝滚动(绝对可以用)

作者：编程知识库发布：2012-11-01 分类：Javascript 阅读：1,006次

现在又想做一个无缝滚动了，所以在网上找啊找，好多都是相同的，而且调试复杂，好多都不能动，也懒得去细看，终于让我发现了这个，希望能帮到别人：

原样复制后，几乎不需要改动就能用了！有问题大家讨论

<!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=gb2312″ />
<title>滚动代码</title>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}

.left_1{ width:500px; height:100px; margin:0 auto;}
.left_1 ul{}
.left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;}
.left_1 p{ width:50px; he
100px; line-height:100px;}
.left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;}
</style>
<script language=”javascript”>
function scrollSZ(con_id,speed,direct){
var con,items,heightHalf,heightAll;
var timer;
speed = parseInt(speed);//获取设置的速度参数
con = document.getElementById(con_id);
con.style.overflow = “hidden”;
if(direct == “top”){
direct = “top”;
}else if(direct == “bottom”){
direct = “bottom”;
}else{
direct = “top”;
}

con.innerHTML +=con.innerHTML;
con.innerHTML +=con.innerHTML;
items = getChildNodes(con);
if(items.length < 1){
return;
}
heightAll = 0;
for(var i=0;i<items.length;i++){
var numTop,numBottom;
if (!!window.ActiveXObject){
numTop = items[i].currentStyle[“marginTop”];
numBottom = items[i].currentStyle[“marginBottom”];
}else{
numTop = document.defaultView.getComputedStyle(items[i],null)[“marginTop”];
numBottom = document.defaultView.getComputedStyle(items[i],null)[“marginBottom”];
}
numTop = parseInt(numTop);
numBottom = parseInt(numBottom);
numTop += numBottom;
if(numTop >0){
heightAll += numTop;
}
heightAll += items[i].offsetHeight;
}
heightHalf = heightAll/2;
if(direct == “bottom”){
con.scrollTop = heightHalf;
timer = setInterval(_scrollBottom,speed);
}else if(direct == “top”){
timer = setInterval(_scrollTop,speed);
}
con.onmouseover = function(){
if(timer){
clearInterval(timer);
timer = null;
}
};
con.onmouseout = function(){
if(!timer){
if(direct == “top”){
timer = setInterval(_scrollTop,speed);
}else if(direct == “bottom”){
timer = setInterval(_scrollBottom,speed);
}

}
};
function _scrollTop(){
if(con.scrollTop < heightHalf){
con.scrollTop += 2;
}else{
con.scrollTop = 0;
}
}
function _scrollBottom(){
if(con.scrollTop > 0){
con.scrollTop -= 2;
}else{
con.scrollTop = heightHalf;
}
}
}
function scrollSP(con_id,speed,direct){
var con,innerCon,timer,items,widthAll,widthHalf;
speed = parseInt(speed);
con = document.getElementById(con_id);
con.style.overflow = “hidden”;
items = getChildNodes(con);
if(items.length == 1){
innerCon = items[0];
}else{
return;
}
innerCon.innerHTML += innerCon.innerHTML;
innerCon.innerHTML += innerCon.innerHTML;
items = getChildNodes(innerCon);
if(items.length<1){
return;
}
widthAll = 0;
for(var i=0;i<items.length;i++){

}

for(var i=0;i<items.length;i++){
var numLeft,numRight;
if (!!window.ActiveXObject){
items[i].style.styleFloat = “left”;
numLeft = items[i].currentStyle[“marginLeft”];
numRight = items[i].currentStyle[“marginRight”];
}else{
items[i].style.cssFloat = “left”;
numLeft = document.defaultView.getComputedStyle(items[i],null)[“marginLeft”];
numRight = document.defaultView.getComputedStyle(items[i],null)[“marginRight”];
}
numLeft = parseInt(numLeft);
numRight = parseInt(numRight);
numLeft += numRight;
if(numLeft>0){
widthAll += numLeft;
}
widthAll += items[i].offsetWidth;
}
widthHalf = widthAll/2;
innerCon.style.width = widthAll+”px”;
if(direct == “left”){
direct = “left”;
}else if(direct == “right”){
direct = “right”;
}else{
direct = “left”
}
if(direct == “left”){
timer = setInterval(_scrollLeft,speed);
}else if(direct == “right”){
con.scrollLeft = widthHalf;
timer = setInterval(_scrollRight,speed);
}
con.onmouseover = function(){
if(timer){
clearInterval(timer);
timer = null;
}
}
con.onmouseout = function(){
if(direct == “left”){
timer = setInterval(_scrollLeft,speed);
}else{
timer = setInterval(_scrollRight,speed);
}
}
function _scrollLeft(){

if(con.scrollLeft<widthHalf){
con.scrollLeft += 2;
}else{
con.scrollLeft = 0;
}
}
function _scrollRight(){
if(con.scrollLeft>0){
con.scrollLeft -= 2;
}else{
con.scrollLeft = widthHalf;
}
}
}
function getChildNodes(obj){//获取元素子节点
var childList,list;
childList = new Array();
list = obj.childNodes;
for(var i=0;i<list.length;i++){
if(list[i].nodeType == 1)
childList[childList.length] = list[i];
}
return childList;
}
</script>
</head>
<body>

<div id=”left_1″>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>b</div>
<div>a</div>
</div>
</div>
<script language=”javascript”>scrollSP(“left_1″,10,”right”);</script>
</body>
</html>

转载请注明：JS图片无缝滚动(绝对可以用) - 编程知识库

该文章由编程知识库发于2012年11月01日发表在Javascript分类下，你可以至底部留下评论。

原创文章转载请注明: JS图片无缝滚动(绝对可以用) | 编程知识库

关键字: jQuery图片滚动, JS图片滚动, JS无缝滚动

上一篇：jquery树形折叠菜单效果

下一篇：原生js仿jquery class选择器和sibling方法

您可能还会对这些文章感兴趣

雷军22年前写的程序代码保准你没见过！

作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
UED原型设计工具Axure汉化版

Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
百度公共DNS无劫持IP 从此上网无阻

今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
小伙打造网站媒体帝国月访问量4500万

　　BI中文站 6月7日报道艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...