效果图

原生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;
    }
    ul {
      display: flex;
      justify-content: space-bet;
      flex-wrap: nowrap;
      position: absolute;
      left: 0;
      top: 0;
    }
    li {
      margin-right: 10px;
      list-style: none;
      width: 196.58px;
      height: 185px;
    }
    img {
      width: 100%;
      height: 185px;
    }

3、JS代码

// 轮播图横向滚动
window.onload = function () {
	let oDiv = document.getElementsByClassName('timeWrap')[0];
	let oUl = document.getElementsByTagName('ul')[0];
	let oLis = oUl.getElementsByTagName('li'); // 获取ul下的所有li
	oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; // 图片衔接
	oUl.style.width = oLis[0].offsetWidth * oLis.length + 'px'; // ul的宽度等于每个li的宽度乘以所有li的长度
	let speed = 2;
	// 主方法
	function move () {
		// 如果左边横向滚动了长度一半之后，回到初始位置
		if (oUl.offsetLeft < -oUl.offsetWidth / speed) {
			oUl.style.left = '0'
		}
		// 如果右边横向滚动的距离大于0 就让他的位置回到一半
		if (oUl.offsetLeft > 0) {
			oUl.style.left = -oUl.offsetWidth / speed + 'px';
		}
		oUl.style.left = oUl.offsetLeft-2+'px'; // 进行左横向滚动
		// oUl.style.left = oUl.offsetLeft + speed + 'px'; // 进行右横向滚动
	}
	// 调用方法
	let timer = setInterval(move, 30);
	console.log(oUl);
	// 鼠标指向的时候 暂停
	oDiv.onmouseover = function () {
		// clearTimeout(timer);
		clearInterval(timer);
	}
	// 鼠标离开之后 继续滚动
	oDiv.onmouseout = function () {
		timer = setInterval(move, 30)
	}
}

Vue图片横向滚动

1、模板

<template>
  <div>
    <!-- 定义一个滚动范围的父div 并绑定ref=all（方便下方方法中取得此元素最左边位置），必要样式：overflow: hidden; display: flex; justify-content: left; -->
    <div class="carousel" ref="all">
      <!-- 循环数组数据，并绑定ref=demoItem(方便取得循环的每一个元素的最左边位置，并动态添加transform样式) -->
      <div class="carousel-item" v-for="(item, index) in tableData" :key="index" ref="demoItem"
        :style="'transform: translateX(' + item.translateNum + 'px)'" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

2、JS代码

export default {
    data() {
      return {
        tableData: [
          {name: '张三'},
          {name: '李四'},
          {name: '王五'},
          {name: '赵六'},
          {name: '钱七'}
        ],
        translateNum: 0,
        timer: null
      }
    },
    mounted() {
      this.search();
    },
    beforeDestroy() {
      // 销毁定时器，否则可能导致重载此组件时会有多个定时器同时执行，使得滚动变快
      window.clearTimeout(this.timer);
    },
    methods: {
      search() {
        // 循环给tableData数组每一个对象添加translateNum属性为0，这也是为了方便记录每一个对象滚动的宽度
        for (var i = 0; i < this.tableData.length; i++) {
          this.$set(this.tableData[i], 'translateNum', 0);
        }
        // 在元素完全渲染后再循环给每一个对象添加indexLeft属性，记录此对象初始位置，方便滚动超出父元素边界后，重新设置元素位置
        this.$nextTick(() => {
          for (var j = 0; j < this.tableData.length; j++) {
            this.$set(this.tableData[j], 'indexLeft', this.$refs.demoItem[j].offsetLeft);
          }
          // 调用滚动定时器
          this.roll();
        })
      },
      roll() {
        this.timer = setInterval(() => {
          // 循环给每一个对象修改translateNum属性值，从而动态修改页面元素的transform样式，达到滚动的效果
          for (var i = 0; i < this.tableData.length; i++) {
             // 判断此元素是否即将超出父级元素carousel-item的显示区域
             // 1400 = 父级元素carousel的宽度 + 一个子元素carousel-item的宽度（如果元素有间距也需要带上）即 1200 + 180 + 20(间距) 
             // 修改父级元素与子元素样式时需要留意此处也应当一起修改
            if (1400 - this.tableData[i].translateNum - this.tableData[i].indexLeft < 0) {
               // 如果超出，则将元素移动至父级元素显示区域的左方
               // 此处的200 对应着子元素carousel-item的样式宽度
              this.$set(this.tableData[i], 'translateNum', this.$refs.all.offsetLeft - this.tableData[i].indexLeft - 200);
            }
            // 设置每个元素每次滚动的像素大小，像素越小越平滑,这里每次只移动一个像素
            this.$set(this.tableData[i], 'translateNum', this.tableData[i].translateNum + 1);
          }
        }, 30); // 30毫秒滚动一次，时间间隔越短滚动越平滑
      },
      // 鼠标悬停销毁定时器
      mouseOver() {
        window.clearTimeout(this.timer);
      },
      // 鼠标离开再次执行定时器
      mouseLeave() {
        this.roll();
      },
    }
  }