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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供黎川企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為黎川眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

步驟：

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

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

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

第四步：無縫輪播：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)位置對應(yīng)，move函數(shù)中傳參數(shù)根據(jù)類型判斷，boolean 是左右按鈕，數(shù)值室小圓點(diǎn)下標(biāo)相關(guān)；flag參數(shù)代表左右按鈕和小圓點(diǎn)；

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

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

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

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">&lt;</span>
 <span class="btn-right">&gt;</span>
 <ul class="points">
  <li class="current"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

本文題目：JavaScript實(shí)現(xiàn)PC端橫向輪播圖-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article20/doijjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、做網(wǎng)站、搜索引擎優(yōu)化、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)