網頁佈局------輪播圖效果實現

昨夜小楼听风雨發表於2024-05-05
網頁

純css實現輪播圖可以看這裡：純css實現輪播圖（自動輪播和手動輪播）效果_☆*往事隨風*☆的部落格_css輪播圖-CSDN部落格

程式碼來源：

html+css+jquery實現輪播圖自動切換、左右切換、點選切換_jquery圖片輪播幻燈片效果實現左右滾動圖片切換程式碼-CSDN部落格

JS實現輪播圖的三種簡單方法。_js輪播圖-CSDN部落格

1、html+css+jquery

（1）頁面結構

<div class="box">
    <!-- 輪播圖 -->
    <div class="box-img"><img src="/images/1.png"></div>
    <div class="box-img"><img src="/images/2.png"></div>
    <div class="box-img"><img src="/images/3.jpg"></div>
    <div class="box-img"><img src="/images/4.jpg"></div>
    <div class="box-img"><img src="/images/5.jpg"></div>
    <div class="box-img"><img src="/images/test.png"></div>
    <!-- 左右切換 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圓點 -->
    <div class="box-dot">
        <ul>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>
</div>

（2）CSS樣式

    <style>
　　　　/*設定絕對定位*/

        .box {
            height: 460px;
            width: 1000px;
            position: relative;
       　　　　 }
　　　　/*使用絕對定位設定圖片在頁面的位置*/

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 1.5s;
        }
　　　　　/*使用opacity設定*/
        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切換*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圓點*/
        .box-dot {
            position: absolute;
            right: 450px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>

（3）功能實現

<script src="/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var timer;

        // 自動切換
        // function f() {
        //     var timer = setInterval(function () {
        //         $(".box-img").css("opacity", 0);
        //         $(".box-img").eq(index).css("opacity", 1);
        //         $(".btn").css("background-color", "#4a5460");
        //         $(".btn").eq(index).css("background-color", "#ffffff");
        //         if ($(".box-img").length - 1 === index) {
        //             index = 0
        //         } else {
        //             index++;
        //         }
        //     }, 4000);
        // }

        // f();
        // 左右切換
        $(".box-left").click(function () {
            clearInterval(timer);
            // 點選左，index減1，減到最小時讓成為最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            // f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 點選右，index加1，加到最大時讓成為最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            // f();
        });
        // 點選圓點切換輪播圖
        $(".btn").click(function () {
            clearInterval(timer);
            // 獲取第幾個圓點
            index = $(this).index()
            // alert(index)
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            // f();
        });
    })
</script>

1、 實現點選兩次按鈕進行圖片切換

（1）左側按鈕設定：當index==0時也就是展示第一張圖的時候，透過if語句設定index的值為圖片長度-1，透過點選左側按鈕index會進行自減操作，透過index圖片獲取的值會不斷減少直至為0再一次重複之前的操作。

（2）右側按鈕：點選右側按鈕index會進行自增操作，當index的值等於圖片長度-1時(也就是第一張圖片位置)將index設定為0、

（3）在點選按鈕之前透過css()方法將opacity和background-color設定為0和灰色，當點選按鈕時透過eq()方法獲取到圖片的索引將圖片的css()方法設定為opacity1和白色

2、實現圓點切換，首先需要獲取點選圓點的索引，透過$(this).index();可以獲取。實現點選圓點切換圖片和圓點表示與點選兩側按鈕切換圖片一樣都是透過opacity隱藏和顯示圖片

3、自動迴圈圖片實現：設定週期定時器f透過index自增控制圖片的顯示，在點選圖示和圓點時需要清楚定時器，不要在後面加入f();那樣會快速的迴圈一邊

2、html+css+JavaScript

（1）頁面結構

<div id="container">
    <ul class="parent" style="left: 0;">
        <li><img src="/images/1.png"></li>
        <li><img src="/images/2.png"></li>
        <li><img src="/images/3.jpg"></li>
        <li><img src="/images/4.jpg"></li>
        <li><img src="/images/5.jpg"></li>
    </ul>

    <div class="btnLeft">&lt;</div>
    <div class="btnRight">&gt;</div>
    <div class="modal">
        <!-- <div class="title">
            <h2>輪播圖</h2>
        </div> -->
        <div class="dots">
            <ul class="clearfix">
                <li class="on"></li>
                <li class="off"></li>
                <li class="off"></li>
                <li class="off"></li>
                <li class="off"></li>
            </ul>
        </div>
    </div>
</div>

（2）css樣式

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    #container{
        position: relative;
        width: 500px;
        height: 260px;
        margin: 20px auto;
        overflow: hidden; /*溢位隱藏：只顯示一張圖片*/
    }
    #container .parent{
        position: absolute;
        width: 2500px; /*整個圖片層長度：500*5=2500*/
        height: 260px;
    }
    
    #container .parent li{
        float: left;
        width: 500px;
        height: 100%;
    }
    #container .parent li img{
        width: 100%;
        height: 100%;
    }
    #container .btnLeft,
    #container .btnRight{
        width: 30px;
        height: 30px;
        background-color: #9E9E9E;
        border-radius: 20%;
        opacity: 80%;
        position: absolute; /*包含塊為圖片顯示層container*/
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 20px;
            color: #f40;
            text-align: center;
            line-height: 30px;
    }
    #container .btnLeft{
        left: 10px;
    }
    #container .btnRight{
        right: 10px;
    }
    #container .btnLeft:hover,
    #container .btnRight:hover{
        opacity: 90%;
        cursor: pointer;
    }
    /*蒙層*/
    #container .modal{
        width: 100%;
        height: 40px;
        background: rgba(0,0,0,.3);
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 40px;
        padding: 0 40px;
        box-sizing: border-box;
    }
    #container .modal .title{
        float: left;
        color: #fff;
        font-size: 12px;
    }
    #container .modal .dots{
        float: right;
        position: absolute;
        bottom: 10px;
        left: 340px;
    }
    #container .modal .dots li{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        float: left;
        /*可以使用行塊盒*/
        /*display: inline-block;*/
        margin: 0 5px;
        cursor: pointer;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    .on{
        background-color: red;
    }
    .off{
        background-color: gray;
    }

（3）功能實現

<script type="text/javascript">
    
var imgShow = document.getElementsByClassName('parent')[0],
    dotList = document.querySelectorAll('.dots >.clearfix > li');
var btnLeft = document.getElementsByClassName('btnLeft')[0],
    btnRight = document.getElementsByClassName('btnRight')[0];
var dotLen = dotList.length,
    index = 0; //輪播層的圖片索引，0表示第一張

//圓點顯示
function showRadius() {
    for(var i = 0; i < dotLen; i++) {
        if(dotList[i].className = "on"){
            dotList[i].className = "off";
        }
    }
    dotList[index].className = "on";
}

//向左移動
btnLeft.onclick = function() {
    index--;
    if(index < 0){  /*第1張向左時，變為第5張*/
        index = 4;       // index= dotLen -1
    
    }
    showRadius();
    var left;
    var imgLeft = imgShow.style.left;
    if(imgLeft === "0px") { /*當是第1張時，每張圖片左移，移4張圖，位置為-(4*500)*/
        left = -2000;  //left=-(dotLen -1)*500
    }
    else{
        left = parseInt(imgLeft) + 500; /*由於left為負數，每左移一張加500*/
    }
    imgShow.style.left = left + "px";
}

//向右移動
btnRight.onclick = function() {
    index++;
    if(index > 4){  /*第5張向右時，變為第1張*/
        index = 0;
    }
    showRadius();
    var right;
    var imgLeft = imgShow.style.left;
    if(imgLeft === "-2000px") { /*當是第5張時，第1張的位置為0*/
        right = 0;
    }
    else{
        right = parseInt(imgLeft) - 500; /*由於left為負數，每右移一張減500*/
    }
    imgShow.style.left = right + "px";
}

// 自動輪播
/*var timer;
function autoPlay() {
    timer = setInterval(function() {
        var right;
        var imgLeft = imgShow.style.left;
        if(imgLeft === "-2000px") {
            right = 0;
        }
        else{
            right = parseInt(imgLeft) - 500;
        }
        imgShow.style.left = right + "px";
    } ,1000)
}
autoPlay();*/

for(var i = 0; i < dotLen; i++) {
    /*利用閉包傳遞索引*/
    (function(i) {
        dotList[i].onclick = function() {
            var dis = index - i; //當前位置和點選的距離
            imgShow.style.left = (parseInt(imgShow.style.left) + dis * 500) + "px";
            index = i; //顯示當前位置的圓點
            showRadius();
        }
    })(i);
}

</script>

相關文章