本文例項為大家分享了JS輪播圖的實現程式碼，供大家參考，具體內容如下

需求：

自動輪播，滑鼠移入輪播停止、移出繼續，小圓點點選切圖，左右箭頭切圖

效果圖：

![輪播圖]

思路：

將所有需要輪播的圖片橫向排列，可視區大小設定為只能顯示一張圖片，給容器設定移出隱藏後，可視區之外的部分被隱藏，這樣我們就只能看見一張圖片。
輪播實現是改變整個圖片畫幅的left值或者margin-left 值，當點選時移動整個畫幅單個圖片的寬度即可實現滾動到下一張。
後面功能實現順序依舊是寫法一里的思路。

戳！寫法一地址

HTML部分：

<div id="banner">
 <div class="w">
<!-- 左右箭頭-->
 <span class="iconfont icon-zuojiantou"></span>
 <span class="iconfont icon-youjiantou"></span>
<!-- 輪播圖-->
 <ul >
 <li><img src="img/1.jpg" alt="JS輪播圖的實現方法2"></li>
 <li><img src="img/2.jpg" alt="JS輪播圖的實現方法2"></li>
 <li><img src="img/3.jpg" alt="JS輪播圖的實現方法2"></li>
 </ul>
<!-- /小圓點-->
 <ol id="circleContainer">

 </ol>
 </div>
</div>

CSS部分：

<style>
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .w {
 width: 1000px;
 height: 600px;
 margin: 100px auto 0;
 position: relative;
 overflow: hidden;
 }
 ul {
 width: 1000%;
 transition: all .5s ease-in-out;
 }
 ul li {
 float: left;
 width: 1000px;
 }
 ul li img {
 width: 100%;
 height: 600px;
 }
 .iconfont {
 color: white;
 position: absolute;
 font-size: 30px;
 top: calc(50% - 15px);
 background-color: rgba(216,216,0.23);
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 cursor: pointer;
 }
 .iconfont:hover {
 color: palegreen;
 }
 .icon-zuojiantou {
 left: 0;
 }
 .icon-youjiantou {
 right: 0;
 }
 #circleContainer {
 position: absolute;
 bottom: 10px;
 left: calc(50% - 30px);
 }
 #circleContainer li {
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: white;
 margin-right: 5px;
 }
 #circleContainer .change {
 background-color: palegreen;
 }
</style>

JS部分：

<script>
 let timer = setInterval(function () {
 arrow_r.onclick();
 },2000);
 let w = document.querySelector(".w");
 w.addEventListener("mouseenter",function () {
 clearInterval(timer);
 });
 w.addEventListener("mouseleave",function () {
 clearInterval(timer);
 timer = setInterval(function () {
 arrow_r.onclick();
 },2000);
 });
 //獲取元素
 let ul = document.querySelector("ul");
 let ol = document.querySelector("#circleContainer");
 let arrow_r = document.querySelector(".icon-youjiantou");
 let arrow_l = document.querySelector(".icon-zuojiantou");
 let ImgWidth = ul.children[0].offsetWidth;
 let location_i = 0 ;
 // 建立小圓點 動態生成小圓點，圖片增加時小圓點也隨之增加
 for (let i = 0; i<ul.children.length;i++){
 let li = document.createElement("li");
 li.setAttribute("index",i);
 li.addEventListener("click",function () {
 let index = this.getAttribute("index");
 move(ul,index);
 location_i = index ;
 });
 ol.appendChild(li);
 }

 let liclone = ul.children[0].cloneNode(true);
 ul.appendChild(liclone);
 // 輪播函式
 function move(targetObj,n) {
 if (n === targetObj.children.length ) {
 targetObj.style.marginLeft = "0px";
 n = 0;
 }
 targetObj.style.marginLeft = -n * ImgWidth +"px";
 for (let i =0 ;i<ol.children.length;i++){
 ol.children[i].className = "";
 }
 n === 3 ? ol.children[0].className = "change": ol.children[n].className = "change";

 }
 ol.children[0].className = "change";
 // 右箭頭點選
 arrow_r.onclick = function () {
 if (location_i === 3) {
 location_i = 0 ;
 ul.style.marginLeft = "0px" ;
 }
 location_i++;
 move(ul,location_i);

 };
 // 左箭頭點選
 arrow_l.addEventListener("click",function () {
 if (location_i == 0) {
 location_i = ul.children.length -1 ;
 }
 location_i--;
 move(ul,location_i);
 })
</script>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。