javascript實現(xiàn)點擊圖片切換功能

更新時間：2022年07月21日 09:48:25 作者：_洋

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)點擊圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)點擊圖片切換的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果：圖片點擊切換

代碼：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <style>
        .img-list{
            width: 480px;
            height: 850px;
            margin: 0 auto;
            /* 為a提供參照 */
            position:relative;
        }
        img{
            width: 480px;
            height: 850px;
            object-fit: cover;
        }
        .img-list li{
            /* 開啟絕對定位使之可以設(shè)置 z-index */
            position: absolute;
        }
        .img-list li:nth-child(3){
            z-index: 1;
        }
        .pointer{
            /* 開啟絕對定位放在上面 */
            position: absolute;
            z-index: 999;
            bottom: 40px;
            margin-left: 140px;
        }
        .pointer a{
            /* display: block; */
            /* 橫向排列 */
            float: left;
            width: 20px;
            height: 20px;
            background-color: salmon;
            margin-left: 20px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);


            /*默認(rèn)情況下background-color的顏色是會延伸到邊框下面的，如果我們不想要延申，需要設(shè)置 */
            background-clip: content-box;
            border:2px solid transparent;
        }
        .pointer a.active,
        .pointer a:hover
        {
            background-color: #fff;
            border:3px solid rgba(0, 0, 0, 0.3);

        }
        
    </style>
    <script>
        window.onload =function(){
            var imgArray = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.png","./img/5.jpg"];
            var allA =  document.getElementsByTagName("a");
            var img = document.getElementsByTagName("img")[0];

            for(var i =0 ;i<allA.length;i++){
                allA[i].num = i;
                allA[i].onclick=function(){
                    // 使用this.name,??！不能使用allA[i].name,因為i此時已經(jīng)等于5了。
                    var index = this.num;
                    img.src=imgArray[index];

                     for(var j =0 ;j<allA.length;j++){
                         allA[j].className="";
                     }
                    this.className = "active";
                }
            }
        }
    </script>

</head>
<body>
    <ul class="img-list">
        <li><img src="./img/1.jpg" alt=""></li>
        <!-- <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/4.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li> -->

        <div class="pointer">
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: