欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果

 更新時(shí)間:2022年07月04日 15:01:08   作者:setTimeout()  
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下

實(shí)現(xiàn)效果:

功能需求:

1.鼠標(biāo)經(jīng)過(guò)輪播圖模塊,左右按鈕顯示,離開(kāi)隱藏左右按鈕

2.點(diǎn)擊右側(cè)按鈕一次,圖片往左播放一張,左側(cè)按鈕同理。

3.圖片播放的同時(shí),下面的小圓圈模塊也跟隨一起變化。

5.鼠標(biāo)不經(jīng)過(guò)輪播圖,輪播圖會(huì)自動(dòng)向右播放圖片,經(jīng)過(guò)輪播圖之后停止自動(dòng)播放圖片。

輪播圖向右移動(dòng)的時(shí)候要用到緩動(dòng)畫(huà)的函數(shù),具體見(jiàn)博客:JS實(shí)現(xiàn)添加緩動(dòng)畫(huà)的方法

(1)布局:輪播圖部分的圖片用ul進(jìn)行布局,里面的每個(gè)li放a標(biāo)簽,a標(biāo)簽里面再放img;ul需要采用定位,目的是為了后面使用緩動(dòng)畫(huà)(要使用緩動(dòng)畫(huà)必須有定位),然后ul里面的li都浮動(dòng)起來(lái)在一行顯示,ul的寬度可以設(shè)置成輪播圖寬度的600%(這里只要比400%大就可以,因?yàn)檫@里放的是四張輪播圖),然后給輪播圖模塊設(shè)置overflow:hidden就只會(huì)展示一張圖片了。下面小圓點(diǎn)采用絕對(duì)定位,左右兩邊按鈕也采用絕對(duì)定位。

(2)功能1:鼠標(biāo)經(jīng)過(guò)輪播圖模塊,左右按鈕顯示,離開(kāi)隱藏左右按鈕

非常簡(jiǎn)單,就是給輪播圖模塊添加mouseenter和mouseleave事件即可。

(3)功能2:根據(jù)圖片張數(shù)動(dòng)態(tài)添加小圓點(diǎn)

通過(guò)獲得ul里面li的個(gè)數(shù)來(lái)判斷一共需要添加多少個(gè)小圓點(diǎn),但是這里要注意,因?yàn)楹竺嫘枰獙?shí)現(xiàn)輪播圖效果,所以最后一張圖片放的第一張圖片,相當(dāng)于會(huì)比原本的圖片多一張,所以這里小圓點(diǎn)生成的個(gè)數(shù)是圖片張數(shù)減一,通過(guò)document.createElement('li')創(chuàng)建小圓點(diǎn),然后通過(guò)appendChild添加到小圓點(diǎn)列表中。

(4)功能3:點(diǎn)擊右側(cè)按鈕一次,圖片往左播放一張,左側(cè)按鈕同理。

這個(gè)功能是最復(fù)雜的功能,這個(gè)功能做好了,后面的自動(dòng)播放功能就很簡(jiǎn)單了,那么現(xiàn)在來(lái)說(shuō)說(shuō)這個(gè)功能的思路:

 (5)功能4:圖片播放的同時(shí),下面的小圓圈模塊也跟隨一起變化。

再聲明一個(gè)變量circle,點(diǎn)擊一次按鈕,自增1,然后這個(gè)變量對(duì)應(yīng)小圓點(diǎn)坐標(biāo),把當(dāng)前坐標(biāo)的小圓點(diǎn)的類改為current(即變色),但是要注意,在滾動(dòng)到最后一張圖片的時(shí)候,因?yàn)閡l會(huì)快速不做動(dòng)畫(huà)跳到最左側(cè),同時(shí)把num設(shè)置為0,然后再進(jìn)行num++執(zhí)行滑動(dòng)到第二張圖片,相當(dāng)于這一次點(diǎn)擊操作執(zhí)行了兩個(gè)步驟:滑動(dòng)到最左側(cè)同時(shí)執(zhí)行緩動(dòng)畫(huà)移動(dòng)到第二張圖片,這樣看起來(lái)就會(huì)很順暢,看起來(lái)像是從最后一張圖片滾動(dòng)到第一張圖片。但是小圓點(diǎn)并沒(méi)有最后一張圖的坐標(biāo),也就是小圓點(diǎn)數(shù)量和圖片數(shù)量并不是相等的,這樣就會(huì)導(dǎo)致當(dāng)滑動(dòng)到最后一張圖片(與第一張圖片相同的那張圖片)的時(shí)候小圓點(diǎn)一個(gè)都沒(méi)有選中,所以需要提前判斷是否滑動(dòng)到最后一張,要是滑動(dòng)到最后一張就把最后一個(gè)小圓點(diǎn)的類設(shè)置成current。

(6)功能5:點(diǎn)擊小圓圈,可以播放相應(yīng)的圖片。

這個(gè)功能采用給小圓圈設(shè)置自定義屬性實(shí)現(xiàn)。

(7)功能6:鼠標(biāo)不經(jīng)過(guò)輪播圖,輪播圖會(huì)自動(dòng)向右播放圖片,經(jīng)過(guò)輪播圖之后停止自動(dòng)播放圖片。

這個(gè)功能其實(shí)就是鼠標(biāo)離開(kāi)的時(shí)候手動(dòng)調(diào)用點(diǎn)擊右邊按鈕的函數(shù),放上去的時(shí)候就清除定時(shí)器即可。

完整代碼如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .w {
            overflow: hidden;
            position: relative;
            width: 720px;
            height: 454px;
            margin: 200px auto;
        }
        
        ul li {
            list-style: none;
        }
        
        .main .focus ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 600%;
        }
        
        .main .focus ul li {
            float: left;
        }
        
        .main .focus ul li img {
            width: 720px;
        }
        
        a[class^='arrow'] {
            /* 開(kāi)始時(shí)隱藏箭頭 */
            display: none;
            z-index: 1;
            position: absolute;
            cursor: pointer;
            width: 30px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
            background-color: rgba(0, 0, 0, .3);
        }
        
        .arrow-left {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .arrow-right {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .main .focus ol {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, .5);
        }
        
        .main .focus ol li {
            cursor: pointer;
            float: left;
            margin: 6px 6.5px;
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #fff;
        }
        
        .main .focus .current {
            background-color: #f76211;
        }
    </style>
</head>
 
<body>
    <div class="main w">
        <div class="focus">
            <!-- 左邊按鈕 -->
            <a href="#" class="arrow-left">&lt;</a>
            <!-- 右邊按鈕 -->
            <a href="#" class="arrow-right">&gt;</a>
            <!-- 輪播圖部分 -->
            <ul>
                <li>
                    <a href="#"><img src="../upload/focus.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../upload/focus1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../upload/focus2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../upload/focus3.jpg" alt=""></a>
                </li>
                <!-- 這一張的作用是為了后面做無(wú)縫鏈接 -->
                <li>
                    <a href="#"><img src="../upload/focus.jpg" alt=""></a>
                </li>
            </ul>
            <!-- 下面小圓點(diǎn)部分 -->
            <ol class="circle">
            </ol>
        </div>
    </div>
</body>
<script>
    // 滑動(dòng)函數(shù)
    function moves(obj, target, callback) {
        window.clearInterval(obj.timer);
        obj.timer = window.setInterval(function() {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                window.clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            } else {
                obj.style.left = obj.offsetLeft + step + 'px';
            }
        }, 15)
    }
    // 移動(dòng)到圖片上的時(shí)候左右的箭頭才顯示出來(lái) 離開(kāi)后又隱藏
    var focusing = document.querySelector('.focus');
    // 獲取左箭頭
    var arrowleft = document.querySelector('.arrow-left');
    // 獲取右箭頭
    var arrowright = document.querySelector('.arrow-right');
    var ul = document.querySelector('ul');
    // 獲得圖片張數(shù)
    var len = ul.children.length;
    // 動(dòng)態(tài)生成下面的小圓點(diǎn)
    var ol = document.querySelector('ol');
    for (var i = 0; i < len - 1; i++) {
        var newcircle = document.createElement('li');
        ol.appendChild(newcircle);
    }
    // 把ol里面的第一個(gè)li的類名設(shè)置成current
    ol.children[0].className = 'current';
    // 收移動(dòng)到focus的時(shí)候顯示箭頭
    focusing.addEventListener('mouseenter', function() {
            // 鼠標(biāo)移動(dòng)到圖片的時(shí)候清除定時(shí)器
            window.clearInterval(timer);
            timer = null;
            arrowleft.style.display = 'block';
            arrowright.style.display = 'block';
 
        })
        // 鼠標(biāo)離開(kāi)又隱藏
    focusing.addEventListener('mouseleave', function() {
            // 鼠標(biāo)離開(kāi)又重新設(shè)置定時(shí)器
            // 自動(dòng)播放輪播圖
            timer = window.setInterval(function() {
                // 手動(dòng)調(diào)用點(diǎn)擊事件
                arrowright.click();
            }, 2000)
            arrowleft.style.display = 'none';
            arrowright.style.display = 'none';
        })
        // 給每個(gè)小圓點(diǎn)設(shè)置自定義屬性
    for (var i = 0; i < len - 1; i++) {
        ol.children[i].setAttribute('index', i);
    }
    // 點(diǎn)擊哪個(gè)小圓圈哪個(gè)小圓圈就變色 -排他思想
    for (var i = 0; i < len - 1; i++) {
        ol.children[i].addEventListener('click', function() {
            for (var j = 0; j < len - 1; j++) {
                ol.children[j].className = '';
            }
            // 點(diǎn)擊第幾個(gè)小圓點(diǎn)ul就移動(dòng)小圓點(diǎn)坐標(biāo)乘以圖片寬度
            // alert(-(this.getAttribute('index') * ul.children[0].offsetWidth));
            moves(ul, -this.getAttribute('index') * ul.children[0].offsetWidth)
            num = this.getAttribute('index');
            circle = this.getAttribute('index');
            this.className = 'current';
            // ul.style.left = "-720px";
        })
    }
    // 點(diǎn)擊右邊箭頭 設(shè)置一個(gè)num進(jìn)行移動(dòng)距離
    var num = 0;
    // 點(diǎn)擊右邊的箭頭小圓圈也變色
    var circle = 0;
    arrowright.addEventListener('click', function() {
            if (num == len - 1) {
                ul.style.left = 0;
                num = 0;
                circle = 0
            }
            num++;
            moves(ul, -num * ul.children[0].offsetWidth);
            circle++;
            for (var i = 0; i < len - 1; i++) {
                ol.children[i].className = '';
            }
            // 在加到最后一張重復(fù)圖片的時(shí)候就把第一個(gè)圓點(diǎn)變色
            if (circle == len - 1) {
                // alert('haha')
                ol.children[0].className = 'current';
            }
            ol.children[circle].className = 'current';
        })
        // 點(diǎn)擊左邊箭頭
    arrowleft.addEventListener('click', function() {
            if (num == 0) {
                num = len - 1;
                ul.style.left = -num * ul.children[0].offsetWidth;
                circle = len - 1;
            }
            num--;
            moves(ul, -num * ul.children[0].offsetWidth);
            circle--;
            for (var i = 0; i < len - 1; i++) {
                ol.children[i].className = '';
            }
            // 在減到最后一張重復(fù)圖片的時(shí)候就把第一個(gè)圓點(diǎn)變色
            if (circle == 0) {
                // alert('haha')
                ol.children[0].className = 'current';
            }
            ol.children[circle].className = 'current';
        })
        // 自動(dòng)播放輪播圖
    var timer = window.setInterval(function() {
        // 手動(dòng)調(diào)用點(diǎn)擊事件
        arrowright.click();
    }, 2000)
</script>
 
</html>

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

相關(guān)文章

最新評(píng)論