用js實現(xiàn)簡單輪播圖

我們在瀏覽網(wǎng)頁的時候撒遣,大部分都會看見中間有幾張圖片在自己走動,今天就教一下大家怎么實現(xiàn)
首先我們要在html中排個版,在body里邊

<div class="box">
        <ul>
            <li><img src="../imgs/1.jpg" alt=""></li>
            <li><img src="../imgs/2.jpg" alt=""></li>
            <li><img src="../imgs/3.jpg" alt=""></li>
            <li><img src="../imgs/4.jpg" alt=""></li>
            <li><img src="../imgs/5.jpg" alt=""></li>
            <li><img src="../imgs/6.jpg" alt=""></li>
            <li><img src="../imgs/7.jpg" alt=""></li>
        </ul>
        <button id="left">&lt;</button>
        <button id="right">&gt;</button>
        <ol>  
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

接下來我們在scss里邊給設(shè)置一下樣式

.box {
    width:800px;
    height:380px ;
    position: relative;
    margin: 0 auto;

    ul {
       width:800px;
       height:380px ;
        overflow: hidden;

        li {
           width:800px;
           height:380px ;
            img {
                width:800px;
               height:380px ;
            }
        }
    }


    button {
      width:60px;
      height:80px
        position: absolute;
        top: 50%;
        margin-top: -40px;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        font-size: 40px;
        border: none;
        
    }

    #right{
        position: absolute;
        right: 0px;
    }
    ol{
        position: absolute;
        bottom:50px;
        left:135px;
        li{
          width: 20px;
          height: 20px;
          background-color: #fff;
          border-radius: 50%;
          margin:0px 30px;
          float: left;
        }
         .active{
           background-color: pink;
         }
      }
}

接下來就是js部分

var list = document.querySelectorAll('ul li')  //獲取圖片列表
var rgt = document.getElementById("right")  //右側(cè)點擊
var left = document.getElementById("left")   //左側(cè)點擊
var box = document.getElementsByClassName("box")[0]  //大盒子
var ol_list = document.querySelectorAll('ol>li');   //下面的原點
var timer = null,  定義一個計時器
    ind = 0;  //定義一個下標(biāo)

// 封裝排他  (只顯示自己)
function getpaita() {
    for (var i = 0; i < list.length; i++) {
        list[i].style = "display:none";  //所有圖片不顯示
        ol_list[i].style = '';  //所有原點不顯示
    }
    list[ind].style = "display:block"  //當(dāng)前圖片
    ol_list[ind].style = "background:pink";  //當(dāng)前原點
}
// 開始輪播
function tim() {
    ind++; //下標(biāo)增加
    if (ind > list.length - 1) {  //判斷 如果下標(biāo)到了最后臨界點則返回第一張
        ind = 0;
    }
    
    getpaita()  //排他
}
timer = setInterval(tim, 1000);
// 劃過停止輪播  清除定時器
box.onmouseover = function () {
    clearInterval(timer);
}
// 劃出繼續(xù)執(zhí)行定時器
box.onmouseout = function () {
    timer = setInterval(tim, 1000);
}

// 右擊換下一張
rgt.onclick = function () {
    ind++;
    if (ind > list.length - 1) {
        ind = 0;
    }
    getpaita()
}
// 左擊換上一張
left.onclick = function () {
    ind--;
    console.log(ind)
    if (ind < 0) {
        ind = list.length - 1; //如果下標(biāo)到了前面臨界點則返回最后一張
    }
    getpaita()

}

// 原點  劃過顯示相對應(yīng)圖片
for (var j = 0; j < ol_list.length; j++) {
    ol_list[j].ind = j;
    ol_list[j].onmouseover = function () {
        ind=this.ind;  跟圖片下標(biāo)同步
        getpaita();
    }
}

這就是一個簡單輪播肌似,可以放幾張圖片試試

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市个曙,隨后出現(xiàn)的幾起案子锈嫩,更是在濱河造成了極大的恐慌,老刑警劉巖垦搬,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呼寸,死亡現(xiàn)場離奇詭異,居然都是意外死亡猴贰,警方通過查閱死者的電腦和手機(jī)对雪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來米绕,“玉大人瑟捣,你說我怎么就攤上這事≌じ桑” “怎么了迈套?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長碱鳞。 經(jīng)常有香客問我桑李,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任贵白,我火速辦了婚禮率拒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘禁荒。我一直安慰自己猬膨,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布呛伴。 她就那樣靜靜地躺著勃痴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪磷蜀。 梳的紋絲不亂的頭發(fā)上召耘,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天,我揣著相機(jī)與錄音褐隆,去河邊找鬼污它。 笑死,一個胖子當(dāng)著我的面吹牛庶弃,可吹牛的內(nèi)容都是我干的衫贬。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼歇攻,長吁一口氣:“原來是場噩夢啊……” “哼固惯!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起缴守,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤葬毫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后屡穗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贴捡,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年村砂,在試婚紗的時候發(fā)現(xiàn)自己被綠了烂斋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡础废,死狀恐怖汛骂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情评腺,我是刑警寧澤帘瞭,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站蒿讥,受9級特大地震影響图张,放射性物質(zhì)發(fā)生泄漏锋拖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一祸轮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧侥钳,春花似錦适袜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至给猾,卻和暖如春疫萤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背敢伸。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工扯饶, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人池颈。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓尾序,卻偏偏與公主長得像,于是被迫代替她去往敵國和親躯砰。 傳聞我的和親對象是個殘疾皇子每币,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內(nèi)容