溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS實現(xiàn)輪播圖效果的腳本怎么寫

發(fā)布時間:2022-02-08 09:42:17 來源:億速云 閱讀:202 作者:iii 欄目:開發(fā)技術(shù)

這篇文章主要介紹“JS實現(xiàn)輪播圖效果的腳本怎么寫”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“JS實現(xiàn)輪播圖效果的腳本怎么寫”文章能幫助大家解決問題。

以下是具體的代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>w3cschool-億速云</title>
<!-- css樣式 -->
    <style type="text/css">
        /*清除邊距*/
        div,ul,li{
            margin: 0;
            padding: 0;
        }
        /*首先準備一個放圖片的容器*/
        .container{
            width: 500px;
            height: 280px;
            position: relative;
            top: 100px;
            left: 30%;
            /*border: 1px solid #ccc;*/
        }
        /*圖片樣式*/
        .container img{
            position: absolute;        /*把所有圖片放在同一個位置*/
            width: 100%;
            transition-duration: 0.5s;    /*設(shè)置過渡時間*/
            opacity: 0;                /*把所有圖片變透明*/
        }
        /*圖片顯示開關(guān)*/
        .container img.on{
            opacity: 1;                /*用于顯示圖片*/
        }
        /*左右按鈕 按鈕用圖片更好點,這里為了簡便就用大于小于號*/
        .left, .right{
            position: absolute;
            top: 30%;
            width: 60px;
            height: 100px;
            line-height: 100px;
            background-color: #666;
            opacity: 0.5;
            text-align: center;
            font-size: 60px;
            color: #ccc;
            display: none;    /*先隱藏按鈕*/
            cursor: pointer;    /*設(shè)置鼠標懸停時的樣式*/
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .container:hover .left, .container:hover .right{
            display: block;            /*鼠標懸停才容器范圍內(nèi)時顯示按鈕*/
        }
        .left:hover, .right:hover{
            color: #fff;
        }
        /*焦點*/
        .container ul{
            position: absolute;
            bottom: 0;
            max-width: 500px;
            padding: 5px 200px;
        }
        .container ul li{
            list-style: none;
            float: left;
            background-color: #ccc;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
        }
        .container ul li.active{
            background-color: #282923;        /*焦點激活時的樣式*/
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 先把第一張圖片顯示出來 -->
        <img class="on" src="image/42.png" />
        <img src="image/43.png" />
        <img src="image/44.png" />
        <img src="image/45.png" />
        <!-- 左右切換 -->
        <div class="left"><</div>
        <div class="right">></div>
        <!-- 焦點 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
<!-- js部分 -->
    <script type="text/javascript">
        //1、找到container下的所有img標簽,li標簽,左右按鈕
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');
        //點擊事件
        //點擊按鈕圖片切換
        var index = 0;        //當前圖片下標
        var lastIndex = 0;
        btnRight.onclick = function(){
            //記錄上一張圖片的下標
            lastIndex = index;
            //清除上一張圖片的樣式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index++;
            index %= aImgs.length;    //實現(xiàn)周期性變化
            //設(shè)置當前圖片的樣式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        //左邊按鈕類似
        btnLeft.onclick = function(){
            //記錄上一張圖片的下標
            lastIndex = index;
            //清除上一張圖片的樣式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index--;
            if (index < 0) {
                index = aImgs.length - 1;
            }
            //設(shè)置當前圖片的樣式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
    </script>
</body>
</html>

關(guān)于“JS實現(xiàn)輪播圖效果的腳本怎么寫”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI