JS實現簡易圖片輪播效果

xmnx 9年前發布 | 3K 次閱讀 JavaScript 

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JS幻燈代碼</title>

        <script type="text/javascript">

            window.onload = function () {

                flag = 0;

                obj1 = document.getElementById("slider");

                obj2 = document.getElementsByTagName("li");

                obj2[0].style.backgroundColor = "#666666";//默認被選中顏色

                time = setInterval("turn();", 5000);



            obj1.onmouseover = function () {  
                clearInterval(time);  

            }  
            obj1.onmouseout = function () {  
                time = setInterval("turn();", 6000);  
            }  

            for (var num = 0; num < obj2.length; num++) {  
                obj2[num].onmouseover = function () {  
                    turn(this.innerHTML);  
                    clearInterval(time);  
                }  
                obj2[num].onmouseout = function () {  
                    time = setInterval("turn();", 6000);  
                }  
            }  
            //延遲加載圖片，演示的時候，使用本地圖片，上線后請改為二級域名提供的圖片地址  
            document.getElementById("second").src = "images/2.png";//使用圖片寬660，高550  
            document.getElementById("third").src = "images/3.png";  
            document.getElementById("four").src = "images/4.png";  

        }  

        function turn(value) {  
            if (value != null) {  
                flag = value - 2;  
            }  
            if (flag < obj2.length - 1)  
                flag++;  
            else  
                flag = 0;  
            obj1.style.top = flag * (-550) + "px";  
            for (var j = 0; j < obj2.length; j++) {  
                obj2[j].style.backgroundColor = "#ffffff";  
            }  
            obj2[flag].style.backgroundColor = "#666666";  
        }  

    </script>  
    <style type="text/css">  
        #wrap  
        {  
            height: 550px;  
            width: 660px;  
            overflow: hidden;  
            position: relative;  
            overflow: hidden;  
        }  
        #wrap ul  
        {  
            list-style: none;  
            position: absolute;  
            top: 500px;  
            left: 450px;  
        }  
        #wrap li  
        {  
            margin-left:2px;  
            opacity: .3;  
            filter: alpha(opacity=30);  
            text-align: center;  
            line-height: 30px;  
            font-size: 20px;  
            height: 30px;  
            width: 30px;  
            background-color: #fff;  
            float: left;  
            border-radius:3px;  
            cursor:pointer;  
        }  

        #slider  
        {  
            position: absolute;  
            top: 0px;  
            left: 0px;  
        }  
        #slider img  
        {  
            float: left;  
            border: none;  
        }  
    </style>  
</head>  
<body>  
    <div id="wrap">  
        <div id="slider">  
            <a target="_blank" href="#"><img src="images/1.png" /></a>  
            <a target="_blank" href="#"><img id="second" /></a>  
            <a target="_blank" href="#"><img id="third" /></a>  
            <a target="_blank" href="#"><img id="four" /></a>  
        </div>  
        <ul>  
            <li>1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
        </ul>  
    </div>  
</body>  
</html>  </pre>
 本文由用戶 xmnx 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！