JS輪播圖的實現(xiàn)方法2

更新時間：2020年08月25日 08:39:44 作者：hthththtt

這篇文章主要為大家詳細(xì)介紹了JS輪播圖的具體實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

需求：

自動輪播，鼠標(biāo)移入輪播停止、移出繼續(xù)，小圓點點擊切圖，左右箭頭切圖

效果圖：

![輪播圖]

思路：

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

戳！寫法一地址

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=""></li>
 <li><img src="img/2.jpg" alt=""></li>
 <li><img src="img/3.jpg" alt=""></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, 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 ;
 // 創(chuàng)建小圓點 動態(tài)生成小圓點，圖片增加時小圓點也隨之增加
 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);
 // 輪播函數(shù)
 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圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: