小米官網首頁輪播圖

css樣式：

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

html內容：

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

js內容：

<script>
var box = document.querySelector('.banner');
var ul = box.querySelector('ul');
var ol = box.querySelector('ol');
var left = box.querySelector('.banner>a.left');
var right = box.querySelector('.banner>a.right');
var index = 1;
var flag = true;
var timeId;
var that;
var firstLi;
handleOL()
handleUL()
right.onclick = function(){
    if(!flag){
        return false;
    }
    flag = false;
    index++;
    carouser();
}
left.onclick = function(){
    if(!flag){
        return false;
    }
    flag = false;
    index--;
    carouser();
}
for(let i=0;i<ol.children.length;i++){
    ol.children[i].onclick = function(){
        if(!flag){
            return false;
        }
        flag = false;
        index = i+1;
        carouser()
    }
}
auto();
function handleUL(){
    firstLi = ul.firstElementChild.cloneNode(true);
    var lastLi = ul.lastElementChild.cloneNode(true);
    ul.appendChild(firstLi);
    ul.insertBefore(lastLi,ul.children[0]);
    ul.style.width = firstLi.offsetWidth * ul.children.length + "px";
    ul.style.left = -index * firstLi.offsetWidth + "px";
}
function handleOL(){
    for(var i=0;i<ul.children.length;i++){
        var li = document.createElement("li");
        ol.appendChild(li)
    }
    that = ol.children[index-1];
    ol.style.width = ol.children.length * ol.firstElementChild.offsetWidth * 2 + "px";
    that.style.backgroundColor = 'red';
}
function auto(){
    timeId = setInterval(function(){
        if(!flag){
            return false;
        }
        flag = false;
        index++;
        carouser()
    },2000);
}
box.onmouseover = function(){
    clearTimeout(timeId);
}
box.onmouseout = function(){
    auto()
}
function carouser(){
    move(ul,{left:-index*firstLi.offsetWidth},function(){
        if(index==ul.children.length-1){
            index = 1;
            ul.style.left = -index * firstLi.offsetWidth + 'px'
        }
        if(index==0){
            index = ul.children.length-2;
            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
    });
}

function move(ele,obj,cb){
    var timerObj = {};
    for(let attr in obj){
        timerObj[attr] = setInterval(function(){
            let target = obj[attr];
            let l = getStyle(ele,attr);
            l = parseFloat(l)
            if(attr === "opacity"){
                target = target * 100;
                l = l * 100;
            }
            let percent;
            percent = (target - l)/10;
            if(percent>0){
                percent = Math.ceil(percent);
            }else{
                percent = Math.floor(percent);
            }
            l += percent;
            if(attr === "opacity"){
                ele.style[attr] = l/100
            }else{
                ele.style[attr] = l+ "px"
            }
            if(l==target){
                clearInterval(timerObj[attr]);
                delete timerObj[attr];
                let k = 0;
                for(let i in timerObj){
                    k++
                }
                if(k==0){
                    cb()
                }
            }
            
        },10);
    }
}
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}
</script>

效果圖：

小米官網首頁輪播圖

小米官網首頁輪播圖

首頁輪播圖的非同步更新

路飛學城專案使用xadmin及首頁輪播圖介面

django框架前後端混合專案之首頁輪播圖、主頁、後臺管理、頭像顯示等相關內容-79

專案實戰-點餐小程式-12 首頁-輪播圖

直播app開發，首頁輪播圖效果實現

短視訊商城原始碼，首頁輪播圖佈局管理

Bootstrap：案例 - 首頁輪播大圖 & 響應式導航條

Threejs實現滴滴官網首頁地球動畫

小米官網首頁輪播圖

相關推薦