用Javascript代替Marquee标签

最新推荐文章于 2025-07-29 01:46:31 发布

转载最新推荐文章于 2025-07-29 01:46:31 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cancer_xu/archive/2009/11/19/1605969.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一种使用XHTML、CSS及JavaScript实现图片轮播的方法。通过设置元素的滚动属性，可以实现在限定区域内图片的自动连续滚动展示。文章包含完整的代码示例。

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

1.XHTML 代码：

1<div id="demo">
2 <div id="indemo">
3  <div id="demo1">
4    <div>
5     <a href="#" title=""><img src="#" alt=""/></a>
6     <a href="#" title=""><img src="#" alt=""/></a>
7     <a href="#" title=""><img src="#" alt=""/></a>
8     <a href="#" title=""><img src="#" alt=""/></a>
9   </div>
10  </div>
11 <div id="demo2"></div>
12 </div>

13 </div>

2.JavaScript代码：

</script>

注: tab.scrollLeft 向左滚动； tab.scrollTop 向上滚动； tab.scrollRight 向右滚动； tab.scrollDown 向下滚动。

3.CSS

#demo { overflow:hidden; width: 820px; margin-left:8px; }

    #demo a  img { border: 3px double #F2F2F2;  }
    #indemo { float: left;  width: 800%; height:100px; }
    #demo1 {  float: left; }
    #demo2 {  float: left; }

转载于:https://www.cnblogs.com/cancer_xu/archive/2009/11/19/1605969.html