欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3簡易切割輪播圖的實(shí)現(xiàn)代碼

  發(fā)布時(shí)間：2020-12-09 17:03:25   作者：熊傲   我要評論
這篇文章主要介紹了CSS3簡易切割輪播圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)現(xiàn)思路

  • 首先創(chuàng)建一個(gè)父容器，用兩個(gè)無序列表通過彈性布局將父容器分為兩欄。
  • 在li里面存放圖片通過給左邊的li {background: url('圖片地址') no-repeat; background-size: 200% 100%;}給右邊的li{background-position-x: -300（父容器寬度的一半）px;}來實(shí)現(xiàn)將圖片分割成兩欄。
  • 給ul{ransform-style: preserve-3d; }屬性來開啟瀏覽器的3D顯示。
  • 用子絕父相來將li疊放到一起ul{position: relative;} li {position: absolute;}。
  • 通過transform屬性來設(shè)置li的旋轉(zhuǎn)。
  • 到這里可以添加.box:hover>ul { transition: all 5s;transform: rotateX(360deg); } 來看看效果。
  • 最后添加兩個(gè)按鈕來讓用戶可以自己切換圖片。
  • 點(diǎn)擊時(shí)只用改變ul的旋轉(zhuǎn)角度
  btn1.onclick = ()=>{
            item++;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }
        btn2.onclick = ()=>{
            item--;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }

最后附上全部代碼，希望對學(xué)習(xí)前端的你有所幫助

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切割輪播圖</title>
</head>
<body>
    <div class="box">
        <ul class="letf">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <button id="btn1">上一頁</button><button id="btn2">下一頁</button>
</body>
</html>

css 代碼

*{
    margin: 0;
    padding: 0;
}
body{
    perspective: 800px;
}
.box{
    display: flex;
    width: 600px;
    height: 350px;
    margin: 150px auto;
}
.box:hover ul li:nth-child(1){
    transition: all 5s;
    transform: rotateX(360deg);
}
ul{
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    transform-style: preserve-3d;  /* 開啟瀏覽器的3D顯示 */
    position: relative;
}
li{
    width: 100%;
    height: 100%;
    position: absolute;
}
li:nth-child(1){
    background: url('../images/9.jpg') no-repeat;
    background-size: 200% 100%;
    transform: translateZ(175px);

}
li:nth-child(2){
    background: url('../images/10.jpg') no-repeat;
    background-size: 200% 100%;
    transform: rotateX(90deg) translateZ(175px);
}
li:nth-child(3){
    background: url('../images/11.jpg') no-repeat;
    background-size: 200% 100%;
    transform: rotateX(180deg) translateZ(175px);
}
li:nth-child(4){
    background: url('../images/12.jpg') no-repeat;
    background-size: 200% 100%;
    transform: rotateX(-90deg) translateZ(175px);
}
.right li{
    background-position-x: -300px;
}

js代碼

  let item = 0;
        let btn1 = document.getElementById('btn1');
        let btn2 = document.getElementById('btn2');
        let letf = document.querySelector('.letf');
        let right = document.querySelector('.right')
        btn1.onclick = ()=>{
            item++;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }
        btn2.onclick = ()=>{
            item--;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }

到此這篇關(guān)于CSS3簡易切割輪播圖的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)CSS3切割輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • jQuery css3實(shí)現(xiàn)響應(yīng)式圖文卡片滾動輪播特效

    這是一款jquery和css3響應(yīng)式卡片圖文列表輪播布局?；趏wl-carousel圖片滾動插件，通過bootstrap制作響應(yīng)式卡片布局，組成炫酷的圖文卡片輪播特效。感興趣的朋友前來下載
    2019-05-15

  • CSS3制作輪播圖的一種方法

    輪播圖，網(wǎng)頁上經(jīng)常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種，感興趣的朋友一起看看吧
    2019-11-11

  • 利用 CSS3 實(shí)現(xiàn)的無縫輪播功能代碼

    本文通過實(shí)例代碼給大家介紹了基于css3實(shí)現(xiàn)的無縫輪播效果，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2017-09-25

  • CSS3實(shí)現(xiàn)列表無限滾動/輪播效果

    本文給大家分享CSS3實(shí)現(xiàn)列表無限滾動/輪播效果，實(shí)現(xiàn)思路大概是將當(dāng)前列表滾動至最后一項(xiàng)的末尾，然后瞬間切換回第一項(xiàng)，怎么實(shí)現(xiàn)無限輪播效果，下面小編給大家?guī)砹藢?shí)現(xiàn)
    2021-06-22

最新評論