求一个滚动图片的javascript代码

storein 2003-09-01 03:20:50
我在网上着了半天，都没有找到我想要的这种
我希望：能够滚动多幅图片（比如多个logo）
然后当鼠标移动到图片上时，停止滚动（网上的我找到的都不停止滚动）
谢谢
...全文
221 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
sw47 2003-09-04
  • 打赏
  • 举报
 回复
这个可以呀
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字滚动</title>
　　<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
　　<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
　　<style type=text/css>
　　<!--
　　　.myBoard {
　　　　position: absolute;
　　　　top: 50px;
　　　　left: 50px;
　　　　width: 200px;
　　　　height: 200px;
　　　　background-color: silver;
　　　　visibility: hidden;
　　　　clip: rect(0 0 0 0);
　　　}
　　//-->
　　</style>
　<script id=clientEventHandlersJS language=javascript>
　<!--
　　var top = 50;
　　var left = 50;
　　var objs, objCurrent, objNew;
　　var i, j;
　　var ivlID, ivlsID;
　　var bRoll, bScroll, bWait;
　　
　　bWait = false;　　　//初始为非等待状态
　　objs = 2;　　　　　//滚动块的块数
　　
　　function window_onload() {
　　　i = 1;
　　　objCurrent = document.all.item("myBoard0" + i);
　　　objNew = document.all.item("myBoard0" + (i+1));
　　　objCurrent.style.clip = "rect(0 200 200 0)";
　　　objCurrent.style.visibility = "visible";
　　　bRoll = true;　　　//开始等待变换
　　　ivlID = window.setTimeout("roll()",2000);
　　}
　　
　　function roll() {
　　　window.clearTimeout(ivlID);
　　　bRoll = false;　　　//结束等待变换
　　　j=0;
　　　objNew.style.visibility = "visible";
　　　bScroll = true;　　　//开始滚动
　　　ivlsID = window.setInterval("scroll();",18);　　//开始滚动
　　}
　
　　function scroll() {
　　　objCurrent.style.clip = "rect(" + j + " 200 200 0)";
　　　objCurrent.style.top = 50-j;
　　　objNew.style.top = 250-j;
　　　objNew.style.clip = "rect(0 200 " + j + " 0)";
　　　j+=5;
　　　if (j>200) {
　　　　window.clearInterval(ivlsID);　　　　//到达顶峰，滚动停止
　　　　bScroll = false;　　　//滚动结束
　　　　objCurrent.style.visibility = "hidden";
　　　　i++;　　//到下一个对象
　　　　objCurrent = document.all.item("myBoard0" + i);
　　　　objNew = document.all.item("myBoard0" + (i+1));
　　　　if(i>=objs) {
　　　　　i=0;
　　　　　objNew = document.all.item("myBoard0" + (i+1));
　　　　}
　　　　bRoll = true;　　　　//开始等待变换
　　　　if(!bWait) {
　　　　　ivlID = window.setTimeout("roll();",2000)　　　//滚动结束，开始全局变换计时
　　　　}
　　　}
　　}
　　
　　function bmouseover() {
　　　if(bRoll) {
　　　　window.clearTimeout(ivlID);
　　　}else {
　　　　bWait = true;
　　　}
　　}
　　
　　function bmouseout() {
　　　if(bRoll) {
　　　　ivlID = window.setTimeout("roll()",2000);
　　　}else {
　　　　bWait = false;
　　　}
　　}
　//-->
　</script>
</head>
　<body language=javascript onload="return window_onload()">
　<div id="myBoard01" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
　　<table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
　　　<tr>
　　　　<td bgcolor=#00ccff align=center>this is info one.</td>
　　　</tr>
　　</table>
　</div>
　<div id="myBoard02" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
　　<table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
　　　<tr>
　　　　<td bgcolor="#cccc00" align=center>this is info two.</td>
　　　</tr>
　　</table>
　</div>
　</body>
</html>
sw47 2003-09-03
  • 打赏
  • 举报
 回复
<marquee onmouseover=stop() onmouseout=start()><img><img><img><img><img></marquee>
sw47 2003-09-03
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字滚动</title>
　　<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
　　<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
　　<style type=text/css>
　　<!--
　　　.myBoard {
　　　　position: absolute;
　　　　top: 50px;
　　　　left: 50px;
　　　　width: 200px;
　　　　height: 200px;
　　　　background-color: silver;
　　　　visibility: hidden;
　　　　clip: rect(0 0 0 0);
　　　}
　　//-->
　　</style>
　<script id=clientEventHandlersJS language=javascript>
　<!--
　　var top = 50;
　　var left = 50;
　　var objs, objCurrent, objNew;
　　var i, j;
　　var ivlID, ivlsID;
　　var bRoll, bScroll, bWait;
　　
　　bWait = false;　　　//初始为非等待状态
　　objs = 2;　　　　　//滚动块的块数
　　
　　function window_onload() {
　　　i = 1;
　　　objCurrent = document.all.item("myBoard0" + i);
　　　objNew = document.all.item("myBoard0" + (i+1));
　　　objCurrent.style.clip = "rect(0 200 200 0)";
　　　objCurrent.style.visibility = "visible";
　　　bRoll = true;　　　//开始等待变换
　　　ivlID = window.setTimeout("roll()",2000);
　　}
　　
　　function roll() {
　　　window.clearTimeout(ivlID);
　　　bRoll = false;　　　//结束等待变换
　　　j=0;
　　　objNew.style.visibility = "visible";
　　　bScroll = true;　　　//开始滚动
　　　ivlsID = window.setInterval("scroll();",18);　　//开始滚动
　　}
　
　　function scroll() {
　　　objCurrent.style.clip = "rect(" + j + " 200 200 0)";
　　　objCurrent.style.top = 50-j;
　　　objNew.style.top = 250-j;
　　　objNew.style.clip = "rect(0 200 " + j + " 0)";
　　　j+=5;
　　　if (j>200) {
　　　　window.clearInterval(ivlsID);　　　　//到达顶峰，滚动停止
　　　　bScroll = false;　　　//滚动结束
　　　　objCurrent.style.visibility = "hidden";
　　　　i++;　　//到下一个对象
　　　　objCurrent = document.all.item("myBoard0" + i);
　　　　objNew = document.all.item("myBoard0" + (i+1));
　　　　if(i>=objs) {
　　　　　i=0;
　　　　　objNew = document.all.item("myBoard0" + (i+1));
　　　　}
　　　　bRoll = true;　　　　//开始等待变换
　　　　if(!bWait) {
　　　　　ivlID = window.setTimeout("roll();",2000)　　　//滚动结束，开始全局变换计时
　　　　}
　　　}
　　}
　　
　　function bmouseover() {
　　　if(bRoll) {
　　　　window.clearTimeout(ivlID);
　　　}else {
　　　　bWait = true;
　　　}
　　}
　　
　　function bmouseout() {
　　　if(bRoll) {
　　　　ivlID = window.setTimeout("roll()",2000);
　　　}else {
　　　　bWait = false;
　　　}
　　}
　//-->
　</script>
</head>
　<body language=javascript onload="return window_onload()">
　<div id="myBoard01" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
　　<table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
　　　<tr>
　　　　<td bgcolor=#00ccff align=center>this is info one.</td>
　　　</tr>
　　</table>
　</div>
　<div id="myBoard02" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
　　<table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
　　　<tr>
　　　　<td bgcolor="#cccc00" align=center>this is info two.</td>
　　　</tr>
　　</table>
　</div>
　</body>
</html>
好记忆不如烂笔头abc 2003-09-03
  • 打赏
  • 举报
 回复
连续向左滚动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向左滚动</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>

<body>

<div id="marquees">
<a href="#">链接一</a>
<a href="#">链接二</a>
<a href="#">链接三</a>
<a href="#">链接四</a>
</div>

<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">

marqueesWidth=200;

with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;

function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",10);
}init();

function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}


</script>
</body>
</html>
coffee_cn 2003-09-03
  • 打赏
  • 举报
 回复
<marquee
style="width:130px;height:100px;"
direction="up"
SCROLLAMOUNT=10
SCROLLDELAY=400
onmouseover="stop();"
onmouseout="start();">
<br>
1
2
3
4
5
6
7
8
9
0
<br>
</marquee>
storein 2003-09-03
  • 打赏
  • 举报
 回复
可能我没有说明白我得要求：
图片是从下往上滚动，不是连续的那种，当滚动显示了一副图片时，这副图片应该暂停一下，然后在继续滚动。各副图片见不应该存在不连续的空白。当鼠标放上去时，暂停滚动。
zgmboy 2003-09-03
  • 打赏
  • 举报
 回复
mark.
JS效果 - 无缝滚动/滚动加停顿
本文详细介绍了一个常见的网页效果——无缝滚动的实现过程。通过逐步解析，从基础滚动到循环滚动，再到带暂停效果的滚动，文章提供了完整的代码示例，并解释了关键属性如`innerHTML`、`offsetWidth`和`scrollLeft`的用途。
JS实现图片循环滚动
本文介绍了一种使用JavaScript实现图片循环滚动的方法，当鼠标移入图片区域时，滚动将暂停；鼠标移开后，滚动继续。通过设置定时器并结合onmouseover和onmouseout事件，实现了动态的滚动效果。
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
本文介绍如何使用JavaScript实现图片循环滚动效果，包括利用setTimeout()方法控制滚动速度，通过自定义函数实现图片连续滚动，并结合鼠标事件控制滚动启停。
JS实现图片无缝滚动效果
本文介绍了如何使用JavaScript实现图片无缝滚动效果。通过图片复制并联排列，当滚动结束后将图片移回起点，实现无缝循环。内容包括：布局设置、元素获取、滚动函数、临界点判断、滚动速度控制及鼠标事件的添加。在实际操作中需要注意margin和padding的设置，以避免滚动bug。尽管完成基本效果，但仍有待完善。
js实现图片无缝滚动特效
本文详细解析了如何使用JavaScript的定时器实现网页上图片的无缝滚动效果，通过双倍图片列表和适时重置位置，确保了循环滚动的平滑过渡。
JavaScript

87,987

社区成员

224,683

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章