CSS3圖片輪播效果

時間 2019-11-13

標籤 css3 css 圖片效果欄目 CSS 简体版

原文原文鏈接

　　在網頁中用到圖片輪播效果，單純的隱藏、顯示，那再簡單不過了，要有動畫效果，若是是本身寫的話(不用jquery等)，可能要費點時間。css3的出現，讓動畫變得再也不是問題，並且簡單易用。下面介紹我用css3與js寫的一個圖片輪播效果。
　　通常圖片輪播就是三四張圖片：css

<div class="wrap">
    <div class="carousel">
        <div><img src="http://b204.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/DAx8jd*wHkeZfn2KFFIozuCId3oyygApuIabRH0huoI!/b/Ydkzp3nFfQAAYrelonkwfwAA&bo=ngL2AQAAAAABAEw!" /></div>
        <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/ajO.4FllSbmZVzpKUjPuydfO50ov0WWQ6cE0k0LIrOw!/b/Yci2zXo*cwAAYgFU0nokCAAA&bo=YwLqAQAAAAABAK0!&rf=viewer_4" /></div>
        <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/0HDFCiFDzavtBxpA.3J3bzxmEzO2MqmnCO*9Us*s5PA!/b/YU5U1XoGcQAAYn3J0HqhcQAA&bo=TgKlAQAAAAABAM8!&rf=viewer_4" /></div>
    </div>
</div>

　　首先將圖片左浮動成一排，最外層div設置寬度、高度，而後用 overflow:hidden 只顯示第一張圖片，隱藏超出的寬度部分的其餘圖片。樣式表以下：html

<style>
        .wrap {
            width: 600px;
            min-height:400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;//隱藏超出的內容
        }
        .carousel {
            position: absolute;//定位圖片
            transition: all 0.5s ease-in 0s;//輪播動畫
        }
        img {
            width: 100%;
        }
        .carousel div {
            float: left;
            width: 33.333%;
            text-align: center;
        }
        .button {
            text-align: center;
        }
    </style>

其中最關鍵的就是：前端

transition: all 0.5s ease-in 0s;

這就是css3中的過渡屬性，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。屬性中的每一個值得意義：要過渡的屬性、完成過渡的時間、過渡的動畫效果、延遲開始時間
　　我把設置圖片的寬度和所有圖片的總寬度在js中進行，由於圖片的張數可能會變。若是在css中設置，那麼圖片數變化的時候，就要修改css中相應的值，而在js中就能夠一勞永逸。下面是js：jquery

<script>
    (function () {
        var carousel = document.querySelector(".carousel");
        var img = carousel.querySelectorAll("div");
        var len = img.length;
        [].forEach.call(img, function (item) {
            item.style.width = (100 / len) + "%";//設置每張圖片寬度
        });
        carousel.style.left = "0%";//設置left
        carousel.style.width = (100 * len) + "%";//設置所有圖片寬度
        var pre = document.querySelector(".pre");
        var next = document.querySelector(".next");
        var i = 0;
        next.onclick = function () {
            var left = carousel.style.left;
            if (i < len - 1) {
                carousel.style.left = (parseInt(left) - 100) + "%";//當還沒到最後一張圖片時left減100%
                i++;
            }
            else if (i == len - 1) {
                carousel.style.left = "0%";最後一張時，點擊按鈕跳到第一張
                i = 0;
            }
        };
        pre.onclick = function () {
            var left = carousel.style.left;
            if (i > 0) {
                carousel.style.left = (parseInt(left) + 100) + "%";//不是第一張時left加100%
                i--;
            } else if (i == 0) {
                carousel.style.left = -parseInt(carousel.style.width) + 100 + "%";//第一張時，點擊按鈕跳到最後一張
                i = len - 1;
            }
        };
    }());
</script>

當點擊按鈕時，改變元素的left值，就會出現動畫效果，由於css中設置了 transition: all 0.5s ease-in 0s ，就是當left改變時，當即慢速開始過渡效果，在0.5秒以內完成。css3

　　圖片輪播效果就已經完成了，貼出所有代碼：ide

<!DOCTYPE html>
<html>
<head>
    <title>圖片輪播</title>
    <meta charset="utf-8" />
    <style>
        .wrap {
            width: 600px;
            min-height:400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .carousel {
            position: absolute;
            transition: all 0.5s ease-in 0s;
        }
        img {
            width: 100%;
        }
        .carousel div {
            float: left;
            text-align: center;
        }
        .button {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="carousel">
        <div><img src="http://b204.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/DAx8jd*wHkeZfn2KFFIozuCId3oyygApuIabRH0huoI!/b/Ydkzp3nFfQAAYrelonkwfwAA&bo=ngL2AQAAAAABAEw!" /></div>
        <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/ajO.4FllSbmZVzpKUjPuydfO50ov0WWQ6cE0k0LIrOw!/b/Yci2zXo*cwAAYgFU0nokCAAA&bo=YwLqAQAAAAABAK0!&rf=viewer_4" /></div>
        <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/0HDFCiFDzavtBxpA.3J3bzxmEzO2MqmnCO*9Us*s5PA!/b/YU5U1XoGcQAAYn3J0HqhcQAA&bo=TgKlAQAAAAABAM8!&rf=viewer_4" /></div>
    </div>
</div>
<div class="button"><button class="pre">上一張</button><button class="next">下一張</button></div>

<script>
    (function () {
        var carousel = document.querySelector(".carousel");
        var img = carousel.querySelectorAll("div");
        var len = img.length;
        [].forEach.call(img, function (item) {
            item.style.width = (100 / len) + "%";
        });
        carousel.style.left = "0%";
        carousel.style.width = (100 * len) + "%";
        var pre = document.querySelector(".pre");
        var next = document.querySelector(".next");
        var i = 0;
        next.onclick = function () {
            var left = carousel.style.left;
            if (i < len - 1) {
                carousel.style.left = (parseInt(left) - 100) + "%";
                i++;
            }
            else if (i == len - 1) {
                carousel.style.left = "0%";
                i = 0;
            }
        };
        pre.onclick = function () {
            var left = carousel.style.left;
            if (i > 0) {
                carousel.style.left = (parseInt(left) + 100) + "%";
                i--;
            } else if (i == 0) {
                carousel.style.left = -parseInt(carousel.style.width) + 100 + "%";
                i = len - 1;
            }
        };
    }());
</script>
</body>
</html>