一个Javascript 图片滚动类

最新推荐文章于 2019-03-12 17:23:22 发布

shudingbo

最新推荐文章于 2019-03-12 17:23:22 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：网络 javascript 文章标签： javascript div function url html list

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/Lava_sdb/article/details/1633614

网络同时被 2 个专栏收录

9 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片滚动效果。该效果通过创建动态的div元素并利用数组存储图片URL和链接来实现自动上下滚动展示。此外，还实现了鼠标悬停暂停滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

////// SDGlobal.js

// JScript File

var g_numSeed = 1;

var g_strSeed = "sdbTTzyxdsY";

function SD_GetRandomStr()

{

var name = g_strSeed;

name += g_numSeed;

g_numSeed++;

return name;

}

/* 图片滚动类

注意：所有图片的总高度要大于显示框的高度，才会滚动

list 参数采用json 样式："({img:'http://klas.cuit.edu.cn/link_pic/banner1.gif',url:'http://www.cdyw.org'})"

*/

function SDImageScroll( hostT, width, height, list)

{

this.speed = 30;

this.width = width;

this.height = height;

this.szDiv0 = SD_GetRandomStr();

this.szDiv1 = SD_GetRandomStr();

this.szDiv2 = SD_GetRandomStr();

var pNode = document.getElementById( hostT);

/////

var divT = document.createElement("div");

divT.id = this.szDiv0;

divT.style.overflow = "hidden";

divT.style.height = this.height;

divT.style.width = this.width;

divT.style.background="#214984";

divT.style.color = "#ffffff";

var div1 = document.createElement("div");

div1.id = this.szDiv1;

for(p=0; p<list.length; p++)

{

var listItem = eval(list[p]);

var linka = document.createElement("a");

linka.href = listItem.url;

var Img = new Image();

Img.src = listItem.img;

linka.appendChild(Img);

div1.appendChild( linka );

}

var div2 = document.createElement("div");

div2.id = this.szDiv2;

//debugger;

///////////////////

divT.appendChild( div1 );

divT.appendChild( div2 );

pNode.appendChild( divT );

div2.innerHTML = div1.innerHTML;

divT.scrollTop = divT.scrollHeight;

};

SDImageScroll.prototype.start = function( speed )

{

this.speed = speed;

var div = document.getElementById( this.szDiv0 );

var div1 = document.getElementById( this.szDiv1 );

var div2 = document.getElementById( this.szDiv2 );

var me = this;

this.MarqueeT = function(){

var div = document.getElementById( me.szDiv0 );

var div1 = document.getElementById( me.szDiv1 );

var div2 = document.getElementById( me.szDiv2 );

if(div1.offsetTop - div.scrollTop >= 0)

div.scrollTop += div2.offsetHeight;

else

div.scrollTop--;

}

div.onmouseover = function() {

clearInterval( me.MyMar);

}

div.onmouseout = function() {

me.MyMar = setInterval(me.MarqueeT,me.speed);

}

this.MyMar = setInterval( this.MarqueeT, this.speed);

}

////////////////////////// 测试HTML

<html>

<head>

<script language="javascript" src="../js/SDGlobal.js"></script>

<script language="javascript" type="text/javascript">

function Load()

{

var imglist = new Array();

imglist[0] = "({img:'http://klas.cuit.edu.cn/link_pic/banner1.gif',url:'http://www.cdyw.org'})";

imglist[1] = "({img:'http://klas.cuit.edu.cn/link_pic/banner2.gif',url:'http://www.cdyw.org'})";

imglist[2] = "({img:'http://klas.cuit.edu.cn/link_pic/banner3.gif',url:'http://www.cdyw.org'})";

imglist[3] = "({img:'http://klas.cuit.edu.cn/link_pic/banner4.gif',url:'http://www.cdyw.org'})";

var imgscr = new SDImageScroll("ilink",150,60, imglist);

imgscr.start(40);

}

</script>

</head>

<body onload="Load()">

<p>图片滚动实例</p>

<div id="ilink">

</div>

<hr/>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。