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

案例：輪播圖需求

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

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

功能需求：

實現(xiàn)效果：

html部分

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。