原生javascript輪播圖！

時間 2019-12-13

原文原文鏈接

<style>
            .box
            {
                width: 500px;
                height: 275px;
                
                position: relative;
                margin: 100px auto;
                
            }
            a
            {
                text-decoration: none;
                font-size: 28px;
                text-align: center;
                line-height: 80px;
                display: inline-block;        
                width: 40px;    
                color:#fff;
                background:rgba(0,0,0,0.6);
                position: absolute;
                top:100px;
            }
            .box #prev
            {
                left:0px;
            }
            .box #next
            {
                right: 0px;
                
            }
            .box #txt
            {
                display: block;
                background:rgba(255,255,255,0.4);
                width:100%;
                text-align: center;
                position: absolute;
                bottom:5px;
            }
            *
            {
                padding: 0px;
                margin: 0px;
            }
        </style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box" id="box">
            <a href="javascript:;" id="prev"><</a>
                <a href="javascript:;" id="next">></a>
                <span id="txt">第一張</span>
            <img src="images/1.jpg" id="img" />
        </div>
    </body>
</html>

<script>
            window.onload=function()
            {             // 0                1              2               3
                var aImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];//創建圖片路徑數組
                var aText=["第一張","第二張","第三張","第四張"];//創建文本數組
                var i=0;//初始化變量i
                var prev=document.getElementById('prev');//獲取元素
                var next=document.getElementById('next');
                var oImg=document.getElementById('img');
                var oTxt=document.getElementById('txt');
                var oBox=document.getElementById('box');
                
                next.onclick=function()
                {
                    banner();//調用全局函數banner 繼續往下看就能夠
                }
                prev.onclick=function()
                {
                    i--;//每次使i減小1
                    if(i==-1)//若是i等於-1也就是說輪播圖到了第一個還往前點
                    {
                        i=aImg.length-1;//那麼i等於圖片數組的數量減小1; 由於數組下標默認從0開始 而length則是真實數據個數兒因此-1就是等於跳到最後一個圖片
                    }
                    oTxt.innerHTML=aText[i];//文本內容等於數組的第i個
                    oImg.src=aImg[i];//圖片路徑等於數組的第i個
                }
                banner=function()//函數這裏這樣寫是等於封裝了那個i++減小代碼量 banner=function 這樣寫是設置全局函數以供定時器調用
                {
                    i++;//每次加1
                    if(i==aImg.length)//若是i等於圖片數組的個數兒 那麼說明滾到了最後一個用戶還再日後點
                    {
                        i=0;//既然這樣那麼i=0 跳回到第一個
                    }
                oTxt.innerHTML=aText[i];//同上
                oImg.src=aImg[i];
                }
                Timer=setInterval("banner()",3000);//設置按期器沒3秒變一次而且加上定時器名稱
                oBox.onmouseover=function()
                {
                    clearInterval(Timer);//當主體劃過的時候中止定時器 這時候說明用戶在瀏覽輪播圖
                }
                oBox.onmouseout=function()
                {
                    Timer=setInterval("banner()",3000);//劃出時 再次開啓定時器
                }
            }
        </script>

我要說的都在註釋裏新手看看吧我的認爲寫的還算比較詳細望高手批評！javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。