一、向左滚动
1、调用“图片”栏目图片的向左滚动代码（效果演示）
以下是最新图片标签说明。
以下是引用片段：
-----------------------------------
〈tr〉
〈td class=main_title_575〉〈B〉最新图片〈/B〉〈/td〉
〈/tr〉
〈tr〉
〈td class=main_tdbg_575 vAlign=center align=middle height=131〉
〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--〉〈/td〉〈/tr〉
------------------------------------
用以下是滚动代码代替上面红色的标签部分，注意红色部分的变化。
------------------------------------
〈!--滚动代码开始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉〈table cellPadding=0 align=left border=0 cellspace="0"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滚动代码结束--〉
-----------------------------------
2、文章频道图片向左滚动代码（效果演示）
以下是文章频道模板最新图片部分代码
-----------------------------------
〈tr〉
〈td Class="main_title_575"〉〈b〉最新图片{$ChannelShortName}〈/b〉〈/td〉
〈/tr〉
〈tr〉
〈td Class="main_tdbg_575"〉{$GetPicArticle(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/ td〉
〈/tr〉
〈tr〉
〈td Class="main_shadow"〉〈/td〉
〈/tr〉
------------------------------------
用以下是滚动代码代替上面红色的标签，注意红色部分的变化。红色数字代表了滚动图片的总数（这里为8张）。
----------------------------------
〈!--滚动代码开始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicArticle(ChannelID,0,True,0,8,false,false,0,3,2,130,90,20,0,True,8)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滚动代码结束--〉
-----------------------------------
3、下载频道图片向左滚动代码（效果演示）
以下是下载频道模板推荐下载图片部分代码
-----------------------------------
〈tr〉
〈td Class="main_title_575"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0"〉
〈tr〉
〈td〉〈b〉〈a class=’Class’ href="{$InstallDir}{$ChannelDir}/ShowElite.asp"〉推荐下载(图)〈/a〉〈/b〉〈/td〉〈td align="right"〉{$RssElite}〈/td〉
〈/tr〉
〈/table〉〈/td〉
〈/tr〉
〈tr〉
〈td align="center" Class="main_tdbg_575"〉{$GetPicSoft(ChannelID,0,True,0,4,false,True,0,3,2,130,90,20,0, True,4)} 〈/td〉
〈/tr〉
------------------------------------
用以下是滚动代码代替上面红色的标签，注意红色部分的变化。红色数字代表了滚动图片的总数（这里为12张）。
------------------------------------
〈!--滚动代码开始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicSoft(ChannelID,0,True,0,12,false,True,0,3,2,130,90,20,0,True,12)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滚动代码结束--〉
------------------------------
从以上可以看出，滚动图片代码基本上是相同的，不同的是调用图片的标签变了。------------------------------
二、向上滚动
向上滚动代码使用方法同上左滚动代码，这里只给出代码，不再说明。
以下是文章频道图片调用的滚动代码。
-----------------------------------------------------------
〈!--向上滚动代码开始--〉
〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 360px"〉〈DIV id=rolllink1〉
〈TABLE cellSpacing=5 width="100%"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicArticle(0,0,True,0,6,false,false,0,3,2,160,100,20,0,True,1)}--〉〈/td〉〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/TABLE〉
〈/DIV〉
〈DIV id=rolllink2〉〈/DIV〉
〈/DIV〉
〈SCRIPT〉
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop〈=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
〈/SCRIPT〉
〈!--向上滚动代码结束--〉
-----------------------------------------------------------
以下是图片频道的3行4列向上滚动代码摘录：（效果演示）
………………………
〈tr〉
〈td colspan="3" Class="main_title_575"〉〈a class="Class" href="{$InstallDir}{$ChannelDir}/ShowNew.asp"〉〈b〉最新{$ChannelShortName}〈/b〉〈/a〉〈/td〉
〈/tr〉
〈tr valign="top"〉
〈td colspan="3"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0" Class="main_tdbg_575"〉
〈tr〉
〈td height="200" valign="top"〉
〈!--向上滚动代码开始--〉
〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 365px"〉
〈DIV id=rolllink1〉
〈TABLE cellSpacing=5 width="100%"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicPhoto(ChannelID,0,True,0,24,False,False,0,1,1,130,90,20,0,True, 4)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/TABLE〉
〈/DIV〉
〈DIV id=rolllink2〉〈/DIV〉
〈/DIV〉
〈SCRIPT〉
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop〈=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
〈/SCRIPT〉
〈!--向上滚动代码结束--〉
〈/td〉
〈/tr〉
〈/table〉
〈/td〉
〈/tr〉
〈tr〉
〈td colspan="3" Class="main_shadow"〉〈/td〉
〈/tr〉
…………………………
三、向右滚动
--------------------------------------
〈!--向右滚动代码开始--〉
〈div id=demo style=overflow:hidden;height:120;width:560;〉
〈table align=left cellpadding=0 cellspace=0 border=0〉
〈tr〉
〈td id=demo1 valign=top〉〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉〈td id=demo2 valign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈script〉
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft〈=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee, speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee, speed)}
〈/script〉
〈!--向右滚动代码结束--〉
div实现向左右无缝滚动图片效果(跑马灯) div+css学习笔记22（用div实现向左无缝滚动图片效果）JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动废话少说，代码贴出来：<div id="imgmarquee" style="OVERFLOW: hidden; WIDTH: 580px; align: left; background-color:#0099CC;"> <div style="width:1200px"><!--id="marquePic1"里面的宽度一定要大于id="imgmarquee"的宽度才能看到效果 width:600px;>WIDTH: 580px;大的div宽度要为span的两倍才可以，不然会换行width:1200px zdz的作品，流风的作品--> <span id="marquePic1" style="width:600px; background-color:#990033;"> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> </span>
怎么在网页上制作滚动图片？ 20 [ 标签：网页, 图片] 时光☆流年 2012-03-12 23:00 满意答案 /** * 文字上下滚动 * @param flag 标识是否滚动 * @param fatherMarqueeContentId 父容器 * @param firMarqueeContentId 子容器1 * @param secMarqueeContentId 子容器2 * @param timeSpan 滚动时间间隔默 认为100毫秒 */ var MarqueeObj = function(fatherMarqueeContentId,firMarqueeContentId,secMarqueeContent Id,timeSpan) { this.flag = 0; this.fatherMarqueeContentId = fatherMarqueeContentId; this.firMarqueeContentId = firMarqueeContentId; this.secMarqueeContentId = secMarqueeContentId; this.timeSpan = timeSpan || 100; //初始化，开启循环滚动 this.init = function() { initScrollContentHeight(this); //定时器 setInterval(marquee,this.timeSpan); this.bindMouseOver(); this.bindMouseOut(); } //开始 this.start = function() { this.flag = 0; } //停止 this.stop = function() { this.flag = 1; } var that = this; //滚动核心函数 var marquee = function() { if(that.flag == 1) { return; } if(document.getElementById(that.firMarqueeContentId).offsetHeight <= document.getElementById(that.fatherMarqueeContentId).scrollTop) { document.getElementById(that.fatherMarqueeContentId).scrollTop -= document.getElementById(that.firMarqueeContentId).offsetHeight; } else { document.getElementById(that.fatherMarqueeContentId).scrollTop ++; } } this.bindMouseOver = function() { document.getElementById(this.fatherMarqueeContentId).onmouseover = function() { that.stop(); } } this.bindMouseOut = function() { document.getElementById(this.fatherMarqueeContentId).onmouseout = function() { that.start(); } } /**初始化可滚动内容的高度 * 将可滚动内容的高度和父容器的高度比较，如果低于它， * 就将可滚动内容的高度置为父容器的高度 * @param obj 可滚动对象 */ var initScrollContentHeight = function(obj){ if(document.getElementById(obj.firMarqueeContentId). scrollHeight < document.getElementById(obj.fatherMarqueeContentId).offsetHeight){ document.getElementById(obj.firMarqueeContentId).style.height = document.getElementById(obj.fatherMarqueeContentId).offsetHeight + "px"; document.getElementById(obj.secMarqueeContentId).style.height = document.getElementById(obj.fatherMarqueeContentId).offsetHeight + "px"; }
[网站建设]网页中插入图片实现滚动代码
网页中的浮动图片代码 一、没有点击关闭的
二、向下的无缝循环滚动 程序代码： [ 复制代码到剪贴板 ]
动态网页代码 图片无缝滚动代码
