JavaScript实现PC端横向轮播图

本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码，供大家参考，具体内容如下

步骤：

第一步：先实现右侧按钮点击图片动起来；
1.每次点击图片走的距离；
2.起始位置已知，计算定时器每走一小步的距离；

第二步：判断点击按钮一次图片移动的距离，停止定时器；

第三步：左边按钮逻辑和右侧按钮几乎一致；
1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向

第四步：无缝轮播：html结构修改，在当前结构分别加第一张图和最后一张图；
1.判断图片位置，设置相应位置；

第五步：小圆点逻辑：排他思想；
1.关键在于小圆点变色，用最终位置计算小圆点下标，设置样式；

第六步：点击小圆点，图片切换和小圆点位置对应，move函数中传参数根据类型判断，boolean 是左右按钮，数值室小圆点下标相关；flag参数代表左右按钮和小圆点；

第七步：自动轮播：根据图片下标进行；

第八步：自动轮播和鼠标行为同步时：鼠标移入清楚自动轮播；鼠标移出自动轮播

第九步：鼠标移入后，点击按钮和小圆点有需要把自动轮播的小标值更新，否则没法同步；

html代码：

<div id="swiper"> <ul class="list">  <li><img src="img/9.jpg" alt=""></li>  <!-- 最后一张 -->  <li><img src="img/2.jpg" alt=""></li>  <li><img src="img/3.jpg" alt=""></li>  <li><img src="img/4.jpg" alt=""></li>  <li><img src="img/6.jpg" alt=""></li>  <li><img src="img/9.jpg" alt=""></li>  <!-- 第一张 -->  <li><img src="img/2.jpg" alt=""></li> </ul> <span class="btn-left"><</span> <span class="btn-right">></span> <ul class="points">  <li class="current"></li>  <li></li>  <li></li>  <li></li>  <li></li></ul>

css代码：

<style type="text/css"> * {  margin: 0;  padding: 0; }  ul, li {  list-style: none; }  a {  text-decoration: none; }  img {  display: block; }  input {  outline: none; }  .clearFix:after {  content: '';  display: block;  clear: both; } /*禁止系统滚动条*/  html, body {  height: 100%;  overflow: hidden; }  #swiper {  position: relative;  width: 1000px;  height: 500px;  background: green;  margin: 50px auto 0;  overflow: hidden; }  #swiper .list {  position: absolute;  left: -1000px;  top: 0;  width: 7000px;  overflow: hidden; }  #swiper .list>li {  float: left;  width: 1000px;  height: 500px; }  #swiper .list>li img {  width: 100%;  height: 100%; }  #swiper span {  position: absolute;  /* left: 0; */  top: 40%;  transform: translateY(-50%);  width: 80px;  height: 100px;  background: rgba(0, 0, 0, 0.5);  font-size: 50px;  color: white;  font-weight: bold;  padding-top: 30px;  text-align: center;  opacity: 0;  transition: opacity 1s;  cursor: pointer; }  #swiper:hover span {  opacity: 1; }  #swiper .btn-left {  left: 0; }  #swiper .btn-right {  right: 0; }  #swiper .points {  position: absolute;  left: 40%;  transform: translateX(-50%);  bottom: 20px;  /* width: 300px; */ }  #swiper .points>li {  width: 30px;  height: 30px;  background: rgba(0, 0, 0, 0.5);  border-radius: 50%;  float: left;  margin: 0 5px; }  #swiper .points .current {  background: red; }</style>