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

最新推荐文章于 2024-08-29 11:01:36 发布

GiantChan

最新推荐文章于 2024-08-29 11:01:36 发布

阅读量3.2k

点赞数

分类专栏： web前端文章标签： js 图片轮播

本文链接：https://blog.csdn.net/killzero/article/details/38921691

版权

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

摘要由CSDN通过智能技术生成

RT.

我之前写过一个关于文字轮播,基于MSclass的.http://blog.csdn.net/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&#