仿小米多欄輪播圖

大家好，這是我第一次釋出部落格文章；本人一枚初學者，目前正在學習JavaScript。以下是我隨手寫的程式碼，按著小米的效果來寫的。如果有什麼問題，歡迎大家指正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>多欄輪播圖</title>
        <style>
            body{
                background: #f5f5f5;
                font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
            }
            *{
                margin: 
 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                padding-top: 39px;
                display: block;
            }
            li{
                list-style: none;
                width: 234px;
                height: 339px;
                /* float: left; */ 

                margin-right: 15px;
                float: left;
                box-sizing: border-box;
                background: #fff;
                border-top:1px solid #ffac13;
            }
            ul{
                width: 6500px;
                position: absolute;
                transition: 1s all;
            }
            div{
                width: 981px;
                margin: 100px auto 0;
                position: relative;
                height: 380px;
                overflow: hidden;
            }
            span{
                cursor: pointer;
            }
            img{
                width:160px;
                height:160px;
                display: block;
                margin: 0 auto 22px;
            }
            h3{
                margin: 0 20px 3px;
                font-size: 14px;
                font-weight: 400;
                text-overflow: ellipsis;
                color: #212121;
                overflow: hidden;
                white-space: nowrap;
                text-align: center;
            }
            .desc{
                height: 18px;
                margin: 0 20px 12px;
                font-size: 12px;
                text-overflow: ellipsis;
                color: #b0b0b0;
                overflow: hidden;
                white-space: nowrap;
                text-align: center;
            }
            .price{
                color: #ff6709;
                text-align: center;
                font-size: 14px;
            }
            del{
                color: #b0b0b0;
                margin-left: 3px;
            }

        </style>
</head>
<body>
    <div>
        <span><strong>左邊</strong></span>
        <span><strong>右邊</strong></span>
        <ul>
        </ul>
    </div>
</body>
    <script>
        var arr = [
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96580d0ff3dd826d5111921b2369055d.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'小米智慧門鎖 標準鎖體 磨砂金',
                p:'全新磨砂金配色，精湛工藝升級',
                span:1199,
                del:1499,
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1108c930cc68c0fc02070b33796966ab.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'小米USB充電器65W 快充版（2A1C） 白色',
                p:'超級快充，三臺裝置同時充',
                span:99,
                del:149,
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7d6458c24d0c24db9385ef7355dfd43.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'小米全面屏電視E32C 灰色 32英寸',
                p:'全面屏設計，人工智慧系統',
                span:799,
                del:999
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/899a862e88c1a554c6baa248853c1f73.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            },
            {
                src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fc3cb89a367828b49b3c1f94f2defbfe.png?thumb=1&w=200&h=200&f=webp&q=90",
                h3:'米家小飯煲 白色',
                p:'小容量不浪費',
                span:169,
                del:199
            }
        ];
       
       (function(){

        var ul = document.querySelector('ul');
        arr.forEach(function(value){
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = 'www.baidu.com';
            a.innerHTML = '<img src="'+ value.src +'"  alt="">' + "<h3>" + value.h3 + "</h3>" + '<p class="desc">'+ value.p +'</p>' + '<p class="price"><span>'+ value.span +'</span>元<del>'+ value.del +'</del></p>'
            li.appendChild(a);
            ul.appendChild(li);
        })

        var con = document.querySelectorAll('div > span');
        var div = document.querySelector('div');
        var lis = document.querySelectorAll('li');
        

        var index = 0;       // 左右按鈕單擊次數
        var setp = 0;        // 需要移動的數值
        var flag = true;    // 節流閥

        ul.addEventListener('transitionend',function(){
            flag = true;
        })
        var num = parseInt(lis.length / 4);     // 可點選的次數
        con[1].addEventListener('click', function(){
           if(flag){
            index ++;
            setp = -(lis[0].offsetWidth + 15) * 4 * index;
          
            if(index >= num){
                index = num;
                setp = -(996 * (num - 1) + (lis.length % 4) * 249);
            }
            ul.style.transform = 'translate3d(' + setp +'px, 0px, 0px)';
            index == num ? flag = true : flag = false;
           }
        });
        con[0].addEventListener('click',function(){
           if(flag){
            index --;
            if(index < 1){
                index = 0;
                setp = 0;
            }
            setp = - 996 * index;
            ul.style.transform = 'translate3d(' + setp +'px, 0px, 0px)';
            index == 0 ? flag = true : flag = false;
           }
        });
        
        var timer = setInterval(Time,2000);
        function Time(){
            if(index == num){
                index = -1;
            }
            
            con[1].click();
        }

        div.addEventListener('mouseover',function(){
            clearInterval(timer);
        })
        div.addEventListener('mouseout',function(){
            clearInterval(timer);
            timer = setInterval(Time,2000);
        })
       })()
       
    </script>
</html>

需要要新增欄目時複製一份以下程式碼即可。（主意不要忘記新增小逗號哦）
在這裡插入圖片描述
非常歡迎大家指正哦！

仿小米多欄輪播圖

大家好，這是我第一次釋出部落格文章；本人一枚初學者，目前正在學習JavaScript。以下是我隨手寫的程式碼，按著小米的效果來寫的。如果有什麼問題，歡迎大家指正

仿小米多欄輪播圖

JavaScript仿小米輪播圖效果

小米官網首頁輪播圖

JS實現小米輪播圖

vue中用 ul 和 li 仿輪播圖，可以播放圖片和視訊，親測可用

vue仿攜程輪播圖效果(滑動輪播,下方高度自適應)

主頁（九）-模組——輪播圖-選單分類-租房小組-最新資訊-頂部導航欄

Vue音樂頁面導航欄與輪播圖的配置

GKCycleScrollView - 一個輕量級的自定義輪播圖元件

兩行IOS程式碼實現輪播圖

React Native中ScrollView元件輪播圖與ListView渲染列表元件用法例項分析

JS實現普通輪播圖特效

js實現左右輪播圖

jQuery實現輪播圖效果demo

JS實現輪播圖效果

原生js實現無縫輪播圖

js實現輪播圖效果 z-index實現輪播圖

JS實現橫向輪播圖（初級版）

JS實現縱向輪播圖（初級版）

JS實現橫向輪播圖（中級版）

仿小米多欄輪播圖

大家好，這是我第一次釋出部落格文章；本人一枚初學者，目前正在學習JavaScript。以下是我隨手寫的程式碼，按著小米的效果來寫的。如果有什麼問題，歡迎大家指正

相關推薦