首頁 > 開發者 > 網站開發

js原生輪播圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：


輪播圖是新手學前端的必經之路!
直接上代碼!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            margin: 100px auto;
            width: 520px;
            height: 280px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }
        /*圖片*/
        .all .pic{
            width: 3120px;
            height: 280px;
            position: absolute;
            top: 0;
            left: 0;
        }
        /*左右點擊*/
        .all .slip{
            width: 520px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -12px;
            font-size: 36px;
        }
        .all .slip .left{
            float: left;
            width: 21px;
            height: 36px;
            padding-left: 3px;
            background: rgba(0, 0, 0, 0.5);
        }
        .all .slip .right{
            float: right;
            width: 21px;
            height: 36px;
            padding-left: 3px;
            background: rgba(0, 0, 0, 0.5);
        }
        .all .slip span{
            color: white;
            /*width: 10px;*/
            line-height: 36px;
            display: inline-block;
            margin: 0 auto;
        }
        /*小圓點*/
        .all .circle ul{
            width: 65px;
            height: 13px;
            overflow: hidden;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -32px;
            list-style: none;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 7px;
            cursor: hand;
        }
        .all .circle ul li{
            width: 9px;
            height: 9px;
            background-color: gainsboro;
            border-radius: 50%;
            float: left;
            margin: 2px;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="pic" id="pic">
　　　　<!--這裡是要放五張圖片不過要把第一張串連到最後一張 這樣能顯示較好的輪播效果-->

　　　　　　<img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img src="images/4.jpg" /><img src="images/5.jpg" /><img src="images/1.jpg" />
    </div>
    <div class="slip">
        <div class="left" id="slip_left"><span><</span></div>
        <div class="right" id="slip_right"><span>></span></div>
    </div>
    <div class="circle">
        <ul id="circle_ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script>
    //擷取dom元素
    var pic = document.getElementById("pic");
    var slipLeft = document.getElementById("slip_left");
    var slipRight = document.getElementById("slip_right");
    var circileUl = document.getElementById("circle_ul");
    var lis = circileUl.getElementsByTagName("li");
    //命名變數 leader為盒子所在位置 target為盒子目標位置(在點擊左右按鈕及小圓點確定位置時用到)
    var leader = 0, target = 0;
    var time1 = null,time2 = null,time3 = null;

    //time1 定時器是在沒有任何操作下 讓圖片開始輪著播放出來
    time1 = setInterval(autoplay,1);
    //    輪播函數
    function autoplay() {
        leader--;
        //當位置超過之後重新回到第一張
        leader < -2599? leader = 0 : leader;
        pic.style.left = leader + "px";
        //當整張圖片顯示出來的時候停留兩秒
        if(leader%520 == 0){
            target = leader;
            clearInterval(time1);
            //設定定時器在兩秒之後重新開啟輪播的定時器time1
            time2 = setTimeout(function () {
                time1 = setInterval(autoplay,1);
            },2000);
        }
        //將小圓點的顏色全部變為灰色
        for(var i = 0; i < lis.length; i++){
            lis[i].style.backgroundColor = "gainsboro";
        }
        //選中當前選中的圖片對應的小圓點將他的顏色變為橘黃色
        if(-target/520 == 5){
            lis[0].style.backgroundColor = "#f40";
        }else{
            lis[(-target/520)].style.backgroundColor = "#f40";
        }
    }
    //move為在點擊之後跳轉到目標靶心圖表片的函數
    function move(){
        leader = leader + (target - leader)/10;
        pic.style.left = leader + "px";
        if(Math.abs(leader)%520 < 0.1 || (Math.abs(leader)%520 - 520) > -0.1){
            leader = target;
            clearInterval(time3);
            time2 = setTimeout(function () {
                time1 = setInterval(autoplay,1);
            },2000);
        }
        for(var i = 0; i < lis.length; i++){
            lis[i].style.backgroundColor = "gainsboro";
        }
        if(-target/520 == 5){
            lis[0].style.backgroundColor = "#f40";
        }else{
            lis[(-target/520)].style.backgroundColor = "#f40";
        }
    }


    //左滑點擊事件
    slipLeft.onclick = function () {
        //點擊之後先清除定時器
        clearInterval(time1);
        clearTimeout(time2);
        clearTimeout(time3);
        //得到目標值
        if(leader%520 == 0){
            target = target + 520;
        }
        target > 0? target = -2080 : target;
        time3 = setInterval(move,10);
    };

    //右滑點擊事件
    slipRight.onclick = function () {
        clearInterval(time1);
        clearTimeout(time2);
        clearTimeout(time3);
        if(leader%520 == 0){
            target = target - 520;
            target < -1560? target = 0 : target;
        }else{
            target < -1560? target = 0 : target -=520;
        }
        time3 = setInterval(move,10);
    };

    //設定點擊圓點觸發的事件
    for(var i = 0; i < lis.length; i++){
        //得到下標
        lis[i].index = i;
        lis[i].onclick = function () {
            clearInterval(time1);
            clearTimeout(time2);
            clearTimeout(time3);
            //得到目標位置值
            target = - this.index*520;
            time3 = setInterval(move,10);
            //將選中的的小圓點變色
            this.style.backgroundColor = "#f40";
        }
    }
</script>
</body>
</html>

js原生輪播圖

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More