| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1882 人关注过本帖
标题:如何实现图片不间断的滚动啊?
只看楼主 加入收藏
dushui265
Rank: 1
等 级:新手上路
威 望:2
帖 子:227
专家分:0
注 册:2007-9-28
收藏
 问题点数:0 回复次数:9 
如何实现图片不间断的滚动啊?
我想通过 Marquee 实现图片不间断的循环滚动,中间不会出现空白
有没有比较简单容易实现的代码啊?
搜索更多相关主题的帖子: 滚动 
2007-10-21 14:24
zacom
Rank: 2
等 级:论坛游民
威 望:2
帖 子:381
专家分:15
注 册:2007-9-15
收藏
得分:0 
这个好象只能用JS来完成

没有最好只有更好
2007-10-21 14:42
天涯听雨
Rank: 2
来 自:东莞
等 级:论坛游民
威 望:4
帖 子:497
专家分:64
注 册:2007-8-25
收藏
得分:0 

参考代码:

————————————————————————————————————————

<style type="text/css">

.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}

</style>

<script type="text/javascript">
var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
<DIV id=demo style="OVERFLOW: hidden; WIDTH:580px; HEIGHT:80px">
<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>
<TR>
<TD id=demo1>
<TABLE cellSpacing=0 cellPadding=3 >
<TBODY>
<TR vAlign=top align=left width="360">
<TD><IMG height=80 src="images/photo1.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo2.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo3.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo4.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo5.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo6.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo7.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo8.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo9.jpg" width=120
border=0></TD>
<TD><IMG height=80 src="images/photo10.jpg" width=120
border=0></TD>
</TR></TBODY></TABLE></TD>
<TD id=demo2></TD></TR></TBODY>
</TABLE>
</DIV>
<SCRIPT>
var speed=20

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++
}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function(){clearInterval(MyMar)}

demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT>


从明天起做幸福的人,喂马劈柴周游世界!
2007-10-21 16:43
威龙嘉少
Rank: 1
等 级:新手上路
帖 子:205
专家分:0
注 册:2007-9-24
收藏
得分:0 
怎么改变运行框的大小啊,还有就是点击察看大图怎么做呢?
2007-10-21 18:13
madpbpl
Rank: 4
等 级:贵宾
威 望:11
帖 子:2876
专家分:244
注 册:2007-4-5
收藏
得分:0 
以下是引用威龙嘉少在2007-10-21 18:13:30的发言:
怎么改变运行框的大小啊,还有就是点击察看大图怎么做呢?

搜索lightbox

2007-10-21 19:00
天涯听雨
Rank: 2
来 自:东莞
等 级:论坛游民
威 望:4
帖 子:497
专家分:64
注 册:2007-8-25
收藏
得分:0 
这些还在写出来……,真是要把所有的代码全部写好!

从明天起做幸福的人,喂马劈柴周游世界!
2007-10-22 09:22
dushui265
Rank: 1
等 级:新手上路
威 望:2
帖 子:227
专家分:0
注 册:2007-9-28
收藏
得分:0 

怎么发现把上面比较长的一段<script type="text/javascript">....</SCRIPT>
的代码去掉也会实现同样效果,没有影响啊?


2007-10-22 13:52
chufanggang
Rank: 1
等 级:新手上路
帖 子:27
专家分:0
注 册:2007-1-23
收藏
得分:0 
2007-10-22 20:33
cainiao158
Rank: 1
等 级:新手上路
威 望:1
帖 子:157
专家分:0
注 册:2007-9-14
收藏
得分:0 

我在网上找的,大家借鉴一下吧!!!!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 -->
<a href=""><img src=" " style="width:120px;height:120px;border:0px;" alt="test"/></a>
<a href=""><img src=" " style="width:120px;height:120px;border:0px;" alt="test"/></a>
<a href=""><img src=" " style="width:120px;height:120px;border:0px;" alt="test"/></a>
<a href=""><img src=" " style="width:120px;height:120px;border:0px;" alt="test"/></a>
<!-- 字幕内容结束 -->
</div>
  <!-- 以下是java-scrīpt代码 -->
  <scrīpt language="javascrīpt">
  <!--
    marqueesWidth=480; //内容区宽度度
    stopscroll=false; //这个变量控制是否停止滚动
    with(marquees){
    noWrap=true; //这句表内容区不自动换行
    style.width=marqueesWidth; //于是我们可以将它的宽度设为0,因为它会被撑大
    style.height=0;
    
    style.overflowX="hidden"; //滚动条不可见
    onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
    onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
    }
    //这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
    document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');
    
    function init(){ //初始化滚动内容
    while(templayer.offsetWidth<marqueesWidth){
    templayer.innerHTML+=marquees.innerHTML;
    } //把"templayer"的内容的“两倍”复制回原内容区:
    marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
    //设置连续超时,调用"scrollUp()"函数驱动滚动条:
    setInterval("scrollUp()",20);
    }
    document.body.onload=init;
    preTop=0; //这个变量用于判断滚动条是否已经到了尽头
    function scrollUp(){ //滚动条的驱动函数
    if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
    preTop=marquees.scrollLeft;
    marquees.scrollLeft+=1;
    //如果滚动条不动了,则向上滚动到和当前画面一样的位置
    //当然不仅如此,同样还要向下滚动一个像素(+1):
    if(preTop==marquees.scrollLeft){
    marquees.scrollLeft=templayer.offsetHeight-marqueesWidth+1;
    }
    }
  -->
  </scrīpt>

</body>
</html>


要想飞的更高,就把地平线忘掉!
2007-10-22 21:18
zhangpei01
Rank: 1
等 级:新手上路
帖 子:4
专家分:0
注 册:2008-6-20
收藏
得分:0 
试一试先!
2008-06-26 18:04
快速回复:如何实现图片不间断的滚动啊?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020797 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved