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

案例：輪播圖需求

布局：ul下有很多l(xiāng)i標(biāo)簽；浮動(dòng)在一行；

原理：切換圖片的時(shí)候，把ul位置修改一下，給ul的父容器，設(shè)置一個(gè) overflow:hidden；

功能需求：

序號(hào)輪播 左右按鈕的輪播 自動(dòng)輪播 鼠標(biāo)在輪播圖里面的時(shí)候，停止自動(dòng)輪播，離開后繼續(xù)自動(dòng)輪播

實(shí)現(xiàn)效果：

html部分

<div id='box'> <div id='inner'> <ul id='imglist'><li> <a href='http://www.leifengta.com.cn/bcjs/14257.html#' ><img src='http://www.leifengta.com.cn/bcjs/images/1.jpg' alt=''></a></li><li> <a href='http://www.leifengta.com.cn/bcjs/14257.html#' ><img src='http://www.leifengta.com.cn/bcjs/images/2.jpg' alt=''></a></li><li> <a href='http://www.leifengta.com.cn/bcjs/14257.html#' ><img src='http://www.leifengta.com.cn/bcjs/images/3.jpg' alt=''></a></li><li> <a href='http://www.leifengta.com.cn/bcjs/14257.html#' ><img src='http://www.leifengta.com.cn/bcjs/images/4.jpg' alt=''></a></li><li> <a href='http://www.leifengta.com.cn/bcjs/14257.html#' ><img src='http://www.leifengta.com.cn/bcjs/images/5.jpg' alt=''></a></li><li> <a href='http://www.leifengta.com.cn/bcjs/14257.html#' ><img src='http://www.leifengta.com.cn/bcjs/images/6.jpg' alt=''></a></li> </ul> <div class='list'><i class='current'>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i> </div> <div class='arrow'><span class='arrow-left'>&lt;</span><span class='arrow-right'>&gt;</span> </div> </div></div>

css部分

* { margin: 0; padding: 0; }ul { list-style: none; }.box { width: 730px; height: 454px; padding: 8px; border: 1px solid green; margin: 100px auto; }.inner { position: relative; overflow: hidden; height: 454px; }#imglist { width: 700%; position: absolute; left: 0; transition: left 300ms linear; }li { float: left; }.list { position: absolute; bottom: 20px; left: 50%; margin-left: -85px; }.list i { width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #333; float: left; font-style: normal; line-height: 20px; font-size: 14px; text-align: center; margin-right: 10px; cursor: pointer; }.list i:last-child { margin-right: 0; }.list i.current { background-color: skyblue; color: #fff; }.arrow { position: absolute; width: 100%; top: 50%; margin-top: -30px; }.arrow-left, .arrow-right { width: 30px; height: 60px; position: absolute; font: 20px/60px 'consolas'; color: #fff; background-color: rgba(0, 0, 0, .3); text-align: center; cursor: pointer; }.arrow-right { right: 0; }

js部分：

// 獲取DOM var yuan = document.querySelectorAll('i'); var li = document.querySelector('ul li'); var ul = document.querySelector('ul'); var imgs = document.querySelector('#imglist'); var right = document.querySelector('.arrow-right'); var left = document.querySelector('.arrow-left'); var box = document.querySelector('.box'); window.onload = function() { //------------------------------------這里是點(diǎn)擊小圓圈，控制圖片的切換 //循環(huán)小圓點(diǎn) 注冊(cè)小圓點(diǎn) for (var i = 0; i < yuan.length; i++) { //我們需要這里面的i 必須提前拿出來(lái)，要不最后i的值就是最后一個(gè)數(shù)值了 yuan[i].num = i; //注冊(cè)事件 yuan[i].onmouseover = function() {// 現(xiàn)在要循環(huán)將樣式移除for (var j = 0; j < yuan.length; j++) { yuan[j].classList.remove('current');}//這里是為了將點(diǎn)擊的小圓點(diǎn) 增加上樣式this.classList.add('current');var num = this.num;//到這里的思路就是點(diǎn)擊小圓點(diǎn) 將圖片進(jìn)行移動(dòng)，向左面移動(dòng)，上面css做了相應(yīng)的定位操作//移動(dòng)的距離就是 n 乘以 一張圖片的寬度，//n 就是選擇的小圓點(diǎn)的 坐標(biāo)-----i(num)//圖片的寬度 box.offsetWidthvar left = num * li.offsetWidth;// console.log(num, box.offsetWidth, left);imgs.style.left = `-${left}px`;//這里小原點(diǎn)聯(lián)動(dòng)左右按鈕for (var p = 0; p < yuan.length; p++) { //清除全部樣式（小圓點(diǎn)） yuan[p].classList.remove('current');}//給當(dāng)前的小圓點(diǎn)增加樣式y(tǒng)uan[num].classList.add('current');//這里這個(gè)位置比較關(guān)鍵，在上面設(shè)置完樣式之后，記得將此num賦值給全局的indexindex = this.num; } } //------------------------------------以上是點(diǎn)擊小圓圈，控制圖片的切換 //------------------------------------下面是開始右面輪播，控制圖片的切換 //首先定義一個(gè)全局的index，這個(gè)index的作用依舊是控制圖片的切換 var index = 0; right.onclick = function() { index++; //這里要對(duì)index做一下判斷，如果不做判斷，可以試想一下， //只要你一點(diǎn)擊，index就會(huì)無(wú)限的增大，增大到你“無(wú)法自拔” if (index == ul.children.length) {//如果坐標(biāo)為6的話，顯示應(yīng)該顯示第1張圖片，所以要復(fù)位 即index=0index = 0; } var left = index * li.offsetWidth; // console.log(index, box.offsetWidth, left); imgs.style.left = `-${left}px`; //點(diǎn)擊右面增加聯(lián)動(dòng)小圓點(diǎn)的效果 for (var n = 0; n < yuan.length; n++) {//清除全部樣式（小圓點(diǎn)）yuan[n].classList.remove('current'); } //給當(dāng)前的小圓點(diǎn)增加樣式 yuan[index].classList.add('current'); }; //------------------------------------以上是結(jié)束右面輪播，控制圖片的切換 //------------------------------------下面是開始左面輪播，控制圖片的切換 left.onclick = function() { index--; //這里同右點(diǎn)擊一樣，需要做一下判斷， console.log(index); if (index == -1) {index = ul.children.length - 1; } var left = index * li.offsetWidth; // console.log(index, box.offsetWidth, left); // console.log(left); imgs.style.left = `-${left}px`; //這個(gè)位置做的是 左面點(diǎn)擊聯(lián)動(dòng)小圓點(diǎn) for (var m = 0; m < yuan.length; m++) {//清除全部樣式（小圓點(diǎn)）yuan[m].classList.remove('current'); } //給當(dāng)前的小圓點(diǎn)增加樣式 yuan[index].classList.add('current'); }; //------------------------------------上面是結(jié)束左面輪播，控制圖片的切換 //------------------------------------開始設(shè)置自動(dòng)輪播 var timer = setInterval(function() { right.onclick(); }, 1000); //------------------------------------以上是自動(dòng)輪播結(jié)束 //------------------------------------設(shè)置鼠標(biāo)進(jìn)來(lái)就停止開始 box.onmouseover = function() { clearInterval(timer); }; //------------------------------------設(shè)置鼠標(biāo)進(jìn)來(lái)就停止結(jié)束 //------------------------------------設(shè)置鼠標(biāo)出去就停止開始 box.onmouseout = function() { timer = setInterval(function() {right.onclick(); }, 1000); }; //------------------------------------設(shè)置鼠標(biāo)出去就停止結(jié)束 }

未完待續(xù)，本篇文章做的PC端的處理，目前從6頁(yè)-1頁(yè)，1頁(yè)到6頁(yè)還有點(diǎn)小瑕疵，會(huì)及時(shí)更新上的，其他功能一切正常，歡迎大家評(píng)論

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。