图片自动滚动（横向滚动）

Luckyflowers

已于 2022-04-25 14:26:23 修改

阅读量4.9k

点赞数 4

分类专栏：页面文章标签： javascript vue

于 2022-04-09 18:01:55 首次发布

本文链接：https://blog.youkuaiyun.com/m0_68683769/article/details/124064568

版权

本文介绍了如何使用原生JavaScript和Vue.js实现一排图片自动横向滚动的效果。当鼠标悬停时，滚动会暂停，鼠标移开后继续滚动。详细内容包括HTML结构、CSS样式以及对应的JS和Vue组件代码。

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

实现效果：一排图片自动横向滚动,鼠标指向的时候,滚动暂定,鼠标离开,滚动继续

效果图

原生JS横向滚动

1.html代码

<div class="layout honor">
    <div class="honor_lunbo">
      <div class="timeWrap">
        <ul>
          <li><img src="https://preview.qiantucdn.com/58pic/36/39/88/02z58PIC7YhFN3rkx2Hi4_origin_PIC2018.jpg!qt324new_nowater" alt=""></li>
          <li><img src="https://preview.qiantucdn.com/58pic/36/08/03/42U58PICnxwk6YEHZTcsE_origin_PIC2018.jpg!qt324new_nowater" alt=""></li>
          <li><img src="https://preview.qiantucdn.com/58pic/35/21/96/97858PICsA6h32aAd3c8K_PIC2018.jpg!w580_772_nowater" alt=""></li>
          <li><img src="https://preview.qiantucdn.com/58pic/40/81/20/34G58PICNSfwwtMiEsB9v_origin_PIC2018.jpg!qt324new_nowater" alt=""></li>
          <li><img src="https://preview.qiantucdn.com/weitu/23/17/05/86858PICJmZaeWPFNcwbv_PIC2018.jpg!qt324new_nowater" alt=""></li>
          <li><img src="https://preview.qiantucdn.com/58pic/37/12/97/89F58PIC6WcNsVAZQtt3m_origin_PIC2018.jpg!qt324new_nowater" alt=""></li>
          <li><img src="https://preview.qiantucdn.com/58pic/35/16/90/46D58PICYaPS7dmNnz1xM_PIC2018.jpg!qt324new_nowater" alt=""></li>
        </ul>
      </div>
    </div>
  </div>

2、CSS样式

* {
   
      margin: 0;
      padding: 0;
    }
    .layout {
   
      margin: 0 5%;
      width: 90%;
    }
    .honor_lunbo {
   
      height: 304px;
      overflow: hidden;
    }
    .timeWrap {
   
      position: absolute;
      margin-top: 84px;
      width: 90%;
      height: 185px;
      overflow: hidden;

最低0.47元/天解锁文章