前端页面实现组件从左向右不间断循环滚动

最新推荐文章于 2025-09-27 20:40:46 发布

原创

最新推荐文章于 2025-09-27 20:40:46 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #图片轮播

本文介绍了如何使用HTML表格布局和CSS实现前端组件中的图片轮播效果，特别是解决IE7及以下浏览器中因不支持`display:inline-block`导致的图片折行问题。通过这种方式，可以创建一个从左向右不间断循环滚动的图片展示功能。

RT.

我之前写过一个关于文字轮播,基于MSclass的.http://blog.youkuaiyun.com/killzero/article/details/17790731

现在我将换另外一种方式,来实现类似于这个网页底部的成功案例的效果:http://www.lczscq.com/cn/index.asp

不多说,马上开始.

首先是图片的html排版.这里看你喜好,是喜欢使用表格布局还是div布局.我个人尝试过直接使用ul布局,但是IE7不支持display:inline-block;这一个css属性,导致在IE7以下的浏览器中,li会发生折行.所以还是使用表格布局:

<!--成功案例-->
    <div class="viewBottom" id="viewBottom">
        <p class="bottomTitle">
            <span class="titleCN">成功案例</span>
            <span class="titleEN">Clients</span>
            <br clear="all">
        </p>
        <div class="scrollBox" id="scrollBox">
            <table>
                <tr>
                    <td>