JS -- 記一種用原生JS 實現輪播圖的方法（非無限循環不自動切換）

hidogs 發布于2019-08-23 10:44 / 3178人閱讀

摘要：實現一個非無限循環不自動切換的輪播圖只需要幾張圖片和兩個按鈕簡化部分兩個按鈕，幾張圖片假如有四張圖右側按鈕左側按鈕部分動態添加刪除的屬性部分已是最后一張圖這是第一張圖

實現一個非無限循環不自動切換的輪播圖
只需要幾張圖片和兩個按鈕（簡化）

HTML部分

兩個按鈕，幾張圖片（假如有四張圖）

CSS部分

動態添加刪除li的class屬性(native)

    span{ cursor: pointer; }
    #s1,#s2{
        position: absolute;
        top: 130px;
    }
    #s1{ right: 0;}
    #s2{ left:0; }
    ul{
        width: 460px; 
        height: 280px;
        margin: auto;
        overflow: hidden;
        }
    li{
        float: left;
        display: none;
        background-color: orange;
    }
    .active{
        background-color: #ffffdffffd;
        display: block;
    }

JS部分

         window.onload=function(){
            var index = 0,
                imgs =  document.getElementsByTagName("li");
            s1.onclick = function(e){
               index++;
               if(index >= imgs.length){
                    imgs[imgs.length-1].setAttribute("class", "active");
                    alert("已是最后一張圖")
                    return index = imgs.length-1;;
                }else{
                    imgs[index-1].removeAttribute("class");
                    imgs[index].setAttribute("class", "active");
                    return index;
                }
            }
            
            s2.onclick=function(){
                if(index>0){
                    imgs[index].removeAttribute("class");
                    imgs[index-1].setAttribute("class", "active");
                    index--;
                    return index-1;
                }else{
                    imgs[0].setAttribute("class", "active");
                    alert("這是第一張圖")
                    return index = 0;
                }
            }
        }

GPU云服務器云服務器原生JS實現輪播 js輪播圖視頻 js焦點輪播圖輪播圖鼠標懸浮js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96632.html

實現簡單的輪播圖

摘要：小練習輪播圖組件任務描述在和上一任務同一目錄下面創建一個文件，在目錄中創建，并在其中編碼，實現一個輪播圖的功能。實現思路考察對節點，定時器，事件的處理。小練習3：輪播圖組件任務描述在和上一任務同一目錄下面創建一個task0002_3.html文件，在js目錄中創建task0002_3.js，并在其中編碼，實現一個輪播圖的功能。圖片數量及URL均在HTML中寫好可以配置輪播的順...

EsgynChina 2019-08-22 10:39 評論0 收藏0
手把手教你用原生JavaScript造輪子（2）——輪播圖（更新：ES6版本）

摘要：綁定輪播事件然后是鼠標移入移出事件的綁定鼠標移入移出事件移入時停止輪播播放的定時器，移出后自動開始下一張的播放。通過上一篇文章的學習，我們基本掌握了一個輪子的封裝和開發流程。那么這次將帶大家開發一個更有難度的項目——輪播圖，希望能進一步加深大家對于面向對象插件開發的理解和認識。 So, Lets begin! 目前項目使用 ES5及UMD 規范封裝，所以在前端暫時只支持標簽的引入方式...

jasperyang 2019-08-23 10:57 評論0 收藏0
回顧自己三次失敗的面試經歷

摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

DC_er 2019-08-21 17:42 評論0 收藏0