頁面圖片自動滾動

chenbogger發表於2018-08-28

開啟網頁時，圖片自動在迴圈切換，當想仔細檢視某一張圖片時，停止自動播放，左右提供手動切換按鈕，圖片也可新增 超連結；
程式碼為了方便沒有外聯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        /*css程式碼開始 */
        <style>
            *{margin:0;padding:0;}
            #box1{width:800px;height:400px;margin:50px auto 0;position:relative;}
            #imgs{width:800px;height:400px;}
            .page{width:50px;height:80px;background-color:rgba(0,0,0,0.2);position:absolute;top:160px;font:20px/80px 'Microsoft YaHei';text-align:center;display:none;color:white;}
            #left{left:0;}
            #right{right:0;}
            #aff{list-style:none;position:absolute;left:210px;bottom:20px;}
            #aff li{width:20px;height:20px;float:left;border-radius:50%;margin-left:20px;background-color:gray;text-align:center;font:16px/20px "微軟雅黑";}
        /*css程式碼結束 */
        </style>
        //js原生程式碼
        <script type="text/javascript">
            //頁面載入完畢執行
            window.onload = function(){
                //獲取所有標籤物件
                var oBox1 =  document.getElementById("box1");
                var oImgs = document.getElementById("imgs");
                var oLeft = document.getElementById("left");
                var oRight = document.getElementById("right");
                var oLiArr = document.getElementsByTagName("li");
                //記錄圖片
                var num = 1;
                oLiArr[0].style.backgroundColor = "red";
                //啟動定時器
                var timer = setInterval(run1,2000);
                function run1(){
                    num++;
                    accoord()
                }
                function accoord(){
                    //邊界判斷
                    if(num==9){
                        num = 1;
                    }
                    else if(num==0){
                        num = 8;
                    }
                    //切換圖片
                    oImgs.src = "img/faa/" + num + ".jpg";
                    //重置所有圓點的顏色為灰色
                    for(var i = 0 ;i < oLiArr.length; i++){
                        oLiArr[i].style.backgroundColor = "gray";   
                    }
                    //將目前所選中的圓點設定為紅色
                    oLiArr[num-1].style.backgroundColor = "red";
                }
                //滑鼠移入視窗停止滾動
                oBox1.addEventListener("mouseover",stopFunc,false);
                function stopFunc(){
                    clearInterval(timer);
                    oLeft.style.display = "block";
                    oRight.style.display = "block";

                }
                //滑鼠移出啟動自動 滾動
                oBox1.addEventListener("mouseout",startFunc,false);
                function startFunc(){
                    timer = setInterval(run1,2000);
                    oLeft.style.display = "none";
                    oRight.style.display = "none";
                }
                //滑鼠移入左右按鈕
                oLeft.addEventListener("mouseover",pageFunc,false);
                oRight.addEventListener("mouseover",pageFunc,false);
                function pageFunc(){
                    clearInterval(timer);
                    this.style.backgroundColor = "rgba(0,0,0,0.6)";
                }
                //滑鼠移出左右 按鈕
                oLeft.addEventListener("mouseout",noPageFunc,false);
                oRight.addEventListener("mouseout",noPageFunc,false);
                function noPageFunc(){
                    this.style.backgroundColor = "rgba(0,0,0,0.2)";
                }
                //滑鼠單擊左按鈕切換圖片
                oLeft.addEventListener("click",function(){
                    num--;
                    accoord();
                },false);
                //滑鼠單擊右按鈕切換圖片
                oRight.addEventListener("click",function(){
                    num++;
                    accoord();
                },false);
                //滑鼠移動圓點切換圖片
                for(var i = 0;i < oLiArr.length;i++){
                    oLiArr[i].index = i + 1;
                    oLiArr[i].addEventListener("mouseover",function(){
                        clearInterval(timer);
                        num = this.index;
                        accoord();
                    },false);
                }
            }
        </script>
    </head>
    <--h5-->
    <body>
        <!--整個盒子-->
        <div id="box1">
            <img src="img/faa/1.jpg" id="imgs"/>
            <!--手動切換上一頁-->
            <div id="left" class="page"><</div>
            <!--手動切換下一頁-->
            <div id="right" class="page">></div>
            <!--頁數-->
            <ul id="aff">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
    </body>
</html>

相關文章