JavaScript实现图片横向移动（转载）

最新推荐文章于 2024-12-05 12:51:26 发布

转载最新推荐文章于 2024-12-05 12:51:26 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/juan/archive/2009/05/07/1451355.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的图片滚动效果，通过修改div元素的宽度和位置来达到图片连续滚动的效果。该方法适用于网页设计中需要展示多个图片的场景。

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

var marquee_spd = 25; // 滚动速度，数值越小越快

var repeat = null;

var obj_marquee = document.getElementById("ImgList");//本例中的<div id=ImgList>

function marquee_init()

{

var obj_unit = obj_marquee.firstChild;

var marquee_high = parseInt(obj_marquee.style.height);

var marquee_wide = parseInt(obj_marquee.style.width);

var unit_high = obj_unit.offsetHeight;

var unit_wide = obj_unit.offsetWidth;

var m = 0, n = 0, i = 0;

var tmp = null;

m = Math.ceil(marquee_wide / unit_wide);

n = Math.ceil(marquee_high / unit_high);

obj_unit.style.width = marquee_wide * (m + 1);

obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width;

for(i = 0; i < m; i++)

{

tmp = obj_unit.rows[0].insertCell(-1);

tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML;

tmp.style.width = marquee_wide;

tmp = null;

}

for(i = 0; i < n; i++)

{

obj_marquee.appendChild(obj_unit.cloneNode(true));

}

return;

}

function marquee_show(direction)

{

switch(direction)

{

case "up":

if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop)

{

obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight;

} else

{

obj_marquee.scrollTop++;

}

break;

case "down":

if(obj_marquee.scrollTop <= 0)

{

obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight;

} else

{

obj_marquee.scrollTop--;

}

break;

case "left":

if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth)

{

obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth;

} else

{

obj_marquee.scrollLeft++;

}

break;

case "right":

if(obj_marquee.scrollLeft <= 0)

{

obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth;

} else

{

obj_marquee.scrollLeft--;

}

break;

default:

break;

}

return;

}

function marquee_doit()

{

var direction = "";

direction = obj_marquee.getAttribute("direction");

if(direction != null) marquee_show(direction);

direction = obj_marquee.getAttribute("direction2");

if(direction != null) marquee_show(direction);

return;

}

function startMove()

{

marquee_init();

repeat = setInterval("marquee_doit()", marquee_spd);

obj_marquee.onmouseover = function()

{ clearInterval(repeat); }

obj_marquee.onmouseout = function()

{ repeat = setInterval("marquee_doit()", marquee_spd); }

}

startMove();

</script>

DIV代码:

图片列表

<tr>

<td>

<tbody>

<tr>

</td>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

</div>

转载于:https://www.cnblogs.com/juan/archive/2009/05/07/1451355.html