图片滚动js代码(滚动图片的代码)
js中怎么实现图片不间断的向左滚动效果，要那种代码清晰的~
script type="text/javascript"
var speed = 20;//滚动速度
var maq;
var m1;//第一份滚动的内容
var m2;//第二份滚动的内容
var timer;//定时器
function run(){
if(m1.offsetWidth=maq.scrollLeft){
maq.scrollLeft-=m1.offsetWidth;
}else{
maq.scrollLeft+=6;
}
}
window.onload=function(){
maq=document.getElementById("maq");
m1=document.getElementById("m1");
m2=document.getElementById("m2");
m2.innerHTML=m1.innerHTML;
if(timer==null){
timer=window.setInterval(run,speed);
}
maq.onmouseover=function(){
window.clearInterval(timer);
}
maq.onmouseout=function(){
timer=window.setInterval(run,speed);
}
}
/script
/head
body
div id="maq" style="height:200px; width:180px; overflow:hidden"
table
tr
td id="m1"
table
tr
tdimg src="" width="174" height="268" //td
tdimg src="" width="174" height="268" //td
tdimg src="" width="174" height="268" //td
/tr
/table
/td
td id="m2"/td
/tr
/table
/div
/body
楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了，~要采纳呦~你懂得~~
JS随鼠标滚动而向下移动的图片代码是什么？
我写一个你参考吧。script language="javascript"
var initTop = 0;
function init(){
initTop = document.getElementById("advLayer").style.pixelTop;
}
function move(){
document.getElementById("advLayer").style.pixelTop = initTop + document.body.scrollTop;
}
window.onscroll = move; // 窗体的滚动时间，当页面滚动时调用move()函数
/scriptbody onLoad="init()"
img src="image/top.jpg"img src= "image/content1.jpg"img src="image/content2.jpg"img src = "image/foot.jpg"
div id = "advLayer" style="position:absolute; right:20px; top:80px; z-index:10;"
A href="#"img src="image/lady_0007.jpg" width="295" height="176" border="0"/A
/div
/body希望能帮到您,谢谢。
网页设计 图片滚动代码
素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。
打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。
切换至代码编辑界面，输入如下代码：
bodydiv id="photo-list" ?ul id="scroll" ?
lia href="#"img src="images/1.jpg" width="100px" height="100px" alt=""//a/li ?
lia href="#"img src="images/2.jpg" width="100px" height="100px" alt=""//a/li ?
lia href="#"img src="images/3.jpg" width="100px" height="100px" alt=""//a/li ?
lia href="#"img src="images/4.jpg" width="100px" height="100px" alt=""//a/li ?
lia href="#"img src="images/5.jpg" width="100px" height="100px" alt=""//a/li ?
lia href="#"img src="images/6.jpg" width="100px" height="100px" alt=""//a/li ? ?/ul /div/body
对应效果如图所示：
新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。
在新建的样式表文件"MyStyle.css”文件中输入如下代码：
* { padding:0; margin:0;} ? ? ? /*设置所有对像的内边距为0*/
body { text-align:center;} ? ? ?/*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9?
之所以减去9是第6张图片的右边留白 */
? ?width:681px;
/* 图片的宽度（包含高度、padding、border）
? ?计算：100+2*2+1*2 ?*/?
? ? height:106px; ?
? ? margin:50px auto;?
?overflow:hidden; ? ? /*溢出部份将被隐藏*/?
? ? border:1px dashed #ccc; ?
} ?
#photo-list ul { list-style:none;} ?
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
对应文件内容如图所示：
在网页文件"index.html"中添加对该样式表的引用：
link rel="stylesheet" type="text/css" href="MyStyle.css"
此时网页效果如图所示：
新建一个JS文件，并将该文件另存为“MoveEffect.js"。
在”MoveEffect.js“文件中输入如下所示代码：
? ?var id = function(el) { ? ? ? ? ?return document.getElementById(el); ? ? ? ?},
? ? ? ?c = id('photo-list');
? ?if(c) {
? ? ? ?var ul = id('scroll'),
? ? ? ? ? ?lis = ul.getElementsByTagName('li'),
? ? ? ? ? ?itemCount = lis.length,
? ? ? ? ? ?width = lis[0].offsetWidth, //获得每个img容器的宽度
? ? ? ? ? ?marquee = function() {
? ? ? ? ? ? ? ?c.scrollLeft += 2;
? ? ? ? ? ? ? ?if(c.scrollLeft % width = 1){ ?//当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
? ? ? ? ? ? ? ? ? ?ul.appendChild(ul.getElementsByTagName('li')[0]);
? ? ? ? ? ? ? ? ? ?c.scrollLeft = 0;
? ? ? ? ? ? ? ?};
? ? ? ? ? ?},
? ? ? ? ? ?speed = 50; //数值越大越慢
? ? ? ?ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度 ? ? ? ?
? ? ? ?var timer = setInterval(marquee, speed);
? ? ? ?c.onmouseover = function() {
? ? ? ? ? ?clearInterval(timer);
? ? ? ?};
? ? ? ?c.onmouseout = function() {
? ? ? ? ? ?timer = setInterval(marquee, speed);
? ? ? ?};
? ?};
然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。
script type="text/javascript" src="MoveEffect.js"/script
代码如图所示：
打开“index.html”网页文件，最终效果如果所示：
js实现图片左右滚动
代码：
????title/title
????style
????????body{
????????????margin:0;
????????????padding:0;
????????????background-color:transparent;
????????}
????????div{
????????????width:350px;
????????????overflow:hidden;
????????}
????????table?img{
????????????width:100px;
????????????height:100px;
????????}
????/style
/head
body
????div?id="picScroll"
????????table
????????????tr
????????????????tdaimg?src="../pic/1.jpg"?//a/td
????????????????tdaimg?src="../pic/2.jpg"/a/td
????????????????tdaimg?src="../pic/3.jpg"/a/td
????????????????tdaimg?src="../pic/4.jpg"/a/td
????????????????tdaimg?src="../pic/5.jpg"/a/td
????????????/tr
????????/table
????/div
/body
/html
script
????var?target?=?$('#picScroll');
????var?left?=?0;
????var?speed?=?30;
????function?Marqeen()?{
????????if?(target[0].offsetWidth?=?left)?{
????????????left?-=?target[0].offsetWidth;
????????}
????????else?{
????????????left++;
????????}
????????target.scrollLeft(left);
????}
????$(function?()?{
????????var?marQueen?=?window.setInterval(Marqeen,?speed);
????????target.mouseover(function?()?{
????????????clearInterval(marQueen);
????????});
????????target.mouseout(function?()?{
????????????marQueen?=?window.setInterval(Marqeen,?speed);
????????});
????});
/script
求JS图片滚动代码
使用jquery吧，很容易解决注意要包含jquery.js，网上下载吧，很多的。具体实现如下：
script src="jquery.js"/script
script
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css().find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',2000);
)};
/script
div id="scrollDiv"
ul
li滚动内容/li
/ul
/div
如果对您有帮助，请记得采纳为满意答案，谢谢！祝您生活愉快！
vaela
求js一排多张图片向上滚动代码！不是单张的是多张的！
假设你要滚动的图片的id是"pic1"-"picn" n=1
function Slide()
{
for （i=1;i=n;i++) //n是图片数
{
idd="pic"+i; //生成图片ID
toppx=parseInt(document.getElementById(idd).style.top.replace('px', '')); //获取图片top属性，并去掉属性之后的px，并转换成整型变量
toppx--; // top-1
if （toppx==???) //???是一个数字，当图片完全滚出显示范围，就把图片的top变成一个图片群(多行pic)下方的位置，实现循环滚动
{
toppx=???; //图片群的下方的位置
}
document.getElementById(idd).style.top=toppx+'px'; //新的top值送回图片，实现上滚
}
}
另外记得，这样写，需要把图片的top属性写在html里面，写在css里面是读不到的，但是这样写避免了不同浏览器中获取css中属性的方法不同的问题，有利有弊。
当需要滚动时执行：s=setInterval('Slide()',50);
当需要停止滚动时执行：window.clearInterval(s);