js實現(xiàn)滑動輪播效果

更新時間：2021年09月22日 11:40:59 作者：不忘初心ing

這篇文章主要為大家詳細介紹了js實現(xiàn)滑動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)滑動輪播效果的具體代碼，供大家參考，具體內(nèi)容如下

1、構(gòu)建html樣式，代碼如下

<div class="banner">
        <ul>
            <li>
                <a href="#" >
                    <img src="images/1.jpeg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/2.jpg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/3.jpg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/4.jpg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/5.jpg">
                </a>
            </li>
        </ul>
        <ol>
            
        </ol>
        <a href="#" class="left">&lt;</a>
        <a href="#" class="right">&gt;</a>
</div>

2、了解html基本結(jié)構(gòu) 圖片的路徑可以根據(jù)自己來，把html結(jié)構(gòu)用css樣式簡單修飾，代碼如下

<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
        color:#000;
    }
    .banner{
        width: 500px;
        height: 300px;
        margin:50px auto;
        position: relative;
        border:1px solid #000;
        overflow:hidden;
    }
    .banner ul{
        position: absolute;
        left: 0;
        top: 0;
        height: 300px;
        /* width: 2500px; */
    }
    .banner ul li{
        width: 500px;
        height: 300px;
        float:left;
    }
    .banner ul li a img{
        width: 500px;
        height: 300px;
    }
    .banner ol{
        /* width: 100px; */
        height: 20px;
        position:absolute;
        bottom:10px;
        background-color: rgba(255,255,255,.7);
        left:50%;
        transform: translateX(-50%);
        border-radius:10px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    /* .banner ol li{
        width: 10px;
        height: 10px;
        border-radius:50%;
        background-color: skyblue;
    } */
    .banner>a{
        width: 20px;
        height: 40px;
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        background-color: rgba(10,10,10,.5);
        font-size:20px;
        color:#fff;
        line-height: 2;
        text-align: center;
    }
    .banner>a.left{
        left: 0;
    }
    .banner>a.right{
        right: 0;
    }

3、基本布局結(jié)束后用js來實現(xiàn)輪播，代碼如下

var div = document.querySelector('.banner');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var left = document.querySelector('a.left');
var right = document.querySelector('a.right');
    // 設置一個變量index 作為下標的使用
var index = 1;
    // 遍歷ul下面的li
for(var i=0;i<ul.children.length;i++){
    // 一個ul下面的li要對應一個下面的小圓點按鈕
    // 創(chuàng)建同等數(shù)量的小圓點
    var li = document.createElement('li');
    setStyle(li,{
        width: "10px",
        height: "10px",
        "border-radius":"50%",
        "background-color": "skyblue"
    })
    // 把創(chuàng)建好的li 全部放到ol 這個大盒子里
    ol.appendChild(li);
}
    // ol這個大盒子本身是沒有寬度的 我們要根據(jù)里面的小圓點數(shù)量 設置ol大盒子的寬度
ol.style.width = ol.firstElementChild.offsetWidth*ul.children.length*2 + 'px';
    // 設置一個變量 這個變量是代表有樣式的那個小圓點
var that = ol.children[index-1];
//給ol第一個兒子設置紅色
that.style.background = 'red';
// 實現(xiàn)滑動輪播更好的銜接，前后給ul各補一個li。
var lastLi = ul.lastElementChild.cloneNode(true);
var firstLi = ul.firstElementChild.cloneNode(true);
// 把復制好的標簽分別放在ul大盒子的前面和后面
ul.appendChild(firstLi);
ul.insertBefore(lastLi,ul.firstElementChild);
// 因為ul下面的子元素發(fā)生了變化 我們要給ul 設置相應的寬度
ul.style.width = ul.children.length*lastLi.offsetWidth + 'px';
// 因為我們滑動是從右往左滑動的 所以要給ul 的left值取負
ul.style.left = -ul.firstElementChild.offsetWidth + 'px';
// 設置變量 后面賦值給定時器
var timeId;
// 定義一個開關(guān)
var flag = true;
//右鍵點擊
right.onclick = function(){
    // 如果開關(guān)沒打開 就返回一個false
    if(!flag){
        return false;
    }
    // 并把返回值賦值給 開關(guān) 說明開關(guān)關(guān)閉 再次點擊就沒有效果
    flag = false;
    // 前面我們定義了一個index 每當我們點擊一下就index++
    index++;
    // 調(diào)用 move 函數(shù)
    move(ul,{left:-index*ul.children[0].offsetWidth},function(){
        // 把需要做的事情放在運動結(jié)束后的函數(shù)里面
        // 首先我們要給index 進行判斷 ul總共七個子元素 index對應的是ul子元素的下標 所以 index是不能超過 ul.children.length-1;
        if(index ==ul.children.length-1){
            // 如果index等于ul.children.length-1
            // 就重新給index賦值為1
            index = 1;
            // 并且也要給ul 的left值重新賦值
            ul.style.left = -index*ul.children[0].offsetWidth + 'px';
        }
        // 小圓點也要跟著圖片一起動才行
        // 我們給圖片對應的那個小圓點設置成變量that 因為小圓點本身會有樣式 先給它設置樣式為默認的
        that.style.backgroundColor = 'skyblue';
        // 對應的這個小圓點的樣式就發(fā)生了變化
        ol.children[index-1].style.backgroundColor = 'red';
        // 樣式轉(zhuǎn)換成功后 在把含有樣式的小圓點賦值為變量that
        that = ol.children[index-1];
        // 運動的最后面要把 開關(guān)打開 可以讓右擊再次打開
        flag = true;
    })
}
//左鍵點擊
left.onclick = function(){
    if(!flag){
        return false;
    }
    flag = false;
    // 左點擊是從左往右滑動的就變成了index--
    index--;
    move(ul,{left:-index*ul.children[0].offsetWidth},function(){
        if(index ==ul.children.length-1){
            index = 1;
            ul.style.left = -index*ul.children[0].offsetWidth + 'px';
        }
         // 進入事件后首先判斷 index的 值
        if(index==0){
            // 如果index的值變成0就重新給index賦值
            index = ul.children.length-2;
            // 并且重新給ul的left賦值為第二張圖片的值
            ul.style.left = -index * firstLi.offsetWidth + "px"
        }
        that.style.backgroundColor = 'skyblue';
        ol.children[index-1].style.backgroundColor = 'red';
        that = ol.children[index-1];
        flag = true;
    })
}
// 遍歷ol下面的所有l(wèi)i
for(let i=0;i<ol.children.length;i++){
    // 點擊小圓點事件
    ol.children[i].onclick = function(){
    if(!flag){
        return false;
    }
    flag = false;
    // 因為小圓點的下邊比 圖片的下標少1 在小圓點點擊事件中就要給index重新賦值
    // 讓小圓點和圖片能對應上
    index = i+1;
    move(ul,{left:-index*firstLi.offsetWidth},function(){
            // if(index == 0){
            //     index = ul.children.length-2
            //     ul.style.left = -index.ul.children[0].offsetWidth + 'px'
            // }
            that.style.backgroundColor = 'skyblue';
            ol.children[index-1].style.backgroundColor = 'red';
            that = ol.children[index-1];
            flag = true;
        })
    }
};
    // 自動輪播 
    timeId = setInterval(function(){
        if(!flag){
            return false;
        }
        flag = false;
        index++;
        move(ul,{left:-index*firstLi.offsetWidth},function(){
            if(index == ul.children.length-1){
                index = 1
                ul.style.left = -index*ul.children[0].offsetWidth + 'px'
            }
            that.style.backgroundColor = 'skyblue';
            ol.children[index-1].style.backgroundColor = 'red';
            that = ol.children[index-1];
            flag = true;
        })
    },2000);

    // 鼠標劃過輪播停止
    div.onmouseover = function(){
        clearInterval(timeId);
    }

    //鼠標離開后 在進行自動輪播
    div.onmouseout = function(){
        timeId = setInterval(function(){
            if(!flag){
                return false;
            }
            flag = false;
            index++;
            move(ul,{left:-index*firstLi.offsetWidth},function(){
                if(index == ul.children.length-1){
                    index = 1
                    ul.style.left = -index*ul.children[0].offsetWidth + 'px'
                }
                that.style.backgroundColor = 'skyblue';
                ol.children[index-1].style.backgroundColor = 'red';
                that = ol.children[index-1];
                flag = true;
            })
        },1000);
    };
//封裝好的多運動函數(shù)
function move(ele,obj,fn){
            let timeObj = {};
            for(let attr in obj){
                timeObj[attr] = setInterval(function(){
                    var target = parseFloat(obj[attr]);
                    if(attr === 'opacity'){
                        target*=100
                    }
                    var t = parseFloat(getStyle(ele,attr));
                    if(attr === 'opacity'){
                        t *=100
                    }
                    console.log(t)
                    if((target-t)/100>0){
                        var percent = Math.ceil((target-t)/100);
                    }else{
                        var percent = Math.floor((target-t)/100);
                    }
                    t += percent;
                    if(attr === 'opacity'){
                        ele.style[attr] = t/100 
                    }else{
                        ele.style[attr] = t + 'px';
                    }
                    if(t == target){
                        clearInterval(timeObj[attr])
                        delete timeObj[attr]
                        let k = 0;
                        for(let i in timeObj){
                            k++;
                        }
                        if( k==0){
                            fn();
                            console.log(123)
                        }
                    }
                },10)
            }
        }

// 封裝好的獲取樣式的函數(shù)
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}
// 封裝設置樣式的函數(shù)
function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
};

4、輪播需要的圖片如下