js+css3实现多行图片点击（自动）左右无缝轮播特效

MonroeYu

于 2017-04-06 13:31:00 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37238192/article/details/86167078

本文介绍了如何利用JavaScript和CSS3技术实现一个多行图片的自动和手动点击左右无缝轮播特效。包括HTML结构、CSS样式和JavaScript逻辑，详细展示了轮播图的布局和动画效果。

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

js+css3实现多行图片点击（自动）左右无缝轮播特效

/*效果图*/

HTML:    <div class="scroll">
       <div class="picbox">
       <ul class="piclist mainlist">
           <li class="goodlist">
                       <a class="scrolling_picture"><img src="images/timg.jpg" class="pics" /></a>
                         <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="images/timg2.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class