本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)PC端橫向輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

步驟：

第一步：先實(shí)現(xiàn)右側(cè)按鈕點(diǎn)擊圖片動(dòng)起來(lái)；
1.每次點(diǎn)擊圖片走的距離；
2.起始位置已知，計(jì)算定時(shí)器每走一小步的距離；

第二步：判斷點(diǎn)擊按鈕一次圖片移動(dòng)的距離，停止定時(shí)器；

第三步：左邊按鈕邏輯和右側(cè)按鈕幾乎一致；
1.因此封裝函數(shù)move(flag),函數(shù)傳參是Boolean則是左右按鈕方向

第四步：無(wú)縫輪播：html結(jié)構(gòu)修改，在當(dāng)前結(jié)構(gòu)分別加第一張圖和最后一張圖；
1.判斷圖片位置，設(shè)置相應(yīng)位置；

第五步：小圓點(diǎn)邏輯：排他思想；
1.關(guān)鍵在于小圓點(diǎn)變色，用最終位置計(jì)算小圓點(diǎn)下標(biāo)，設(shè)置樣式；

第六步：點(diǎn)擊小圓點(diǎn)，圖片切換和小圓點(diǎn)位置對(duì)應(yīng)，move函數(shù)中傳參數(shù)根據(jù)類(lèi)型判斷，boolean 是左右按鈕，數(shù)值室小圓點(diǎn)下標(biāo)相關(guān)；flag參數(shù)代表左右按鈕和小圓點(diǎn)；

第七步：自動(dòng)輪播：根據(jù)圖片下標(biāo)進(jìn)行；

第八步：自動(dòng)輪播和鼠標(biāo)行為同步時(shí)：鼠標(biāo)移入清楚自動(dòng)輪播；鼠標(biāo)移出自動(dòng)輪播

第九步：鼠標(biāo)移入后，點(diǎn)擊按鈕和小圓點(diǎn)有需要把自動(dòng)輪播的小標(biāo)值更新，否則沒(méi)法同步；

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; } /*禁止系統(tǒng)滾動(dòng)條*/  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>