原生js按鈕控制圖片切換代碼



109 435 146



特效描述:原生js按鈕控制 圖片切換,原生js基于css3屬性制作三種圖片切換效果,3D輪播、無縫輪播 、淡入淡出圖片輪播任意切換代碼。

代碼結構

1. HTML代碼

    <div class="banner">
        <div class="banner-view1">
            <ul class="banner-pic1">
                <li class="pic0 pic11"></li>
                <li class="pic0 pic22"></li>
                <li class="pic0 pic33"></li>
                <li class="pic0 pic44"></li>
                <li class="pic0 pic55"></li>
                <li class="pic0 pic66"></li>
            </ul>
        </div>
        <span id="prev"></span>
        <span id="next"></span>
        <ul class="indicators">
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
        </ul>
    </div>
    <div class="control">
        <button id="btn1">3D輪播</bttton>
        <button id="btn2">無縫輪播(默認)</bttton>
        <button id="btn3">淡入淡出輪播</button>
    </div>
    <script>
        var oPrev = document.getElementById("prev"),
            oNext = document.getElementById("next"),
            oPicbox = document.getElementsByClassName("banner-pic")[0],
            oBall = document.getElementsByClassName("indicator"),
            oBtn1 = document.getElementById("btn1"),
            oBtn2 = document.getElementById("btn2"),
            oBtn3 = document.getElementById("btn3"),
            oBannerPic1 = document.getElementsByClassName("banner-pic1")[0];
            oLis = oBannerPic1.getElementsByTagName("li"),
            oBannerView1 = document.querySelector(".banner-view1"),
            length = oLis.length;
        var className1 = [
                "pic1",
                "pic2",
                "pic3",
                "pic4",
                "pic5",
                "pic6"
            ],
            className2 = [
                "pic11",
                "pic22",
                "pic33",
                "pic44",
                "pic55",
                "pic66"
            ],
            className3 = [
                "pic111",
                "pic222",
                "pic333",
                "pic444",
                "pic555",
                "pic666"
            ];
        var xDeg = [0,360,180,360,270,90],   //X軸方向旋轉的度數
            yDeg = [0,-90,0,90,0,0], //Y軸方向旋轉的度數
            xTranslate = [0,300,600,900,1200,1500], //X軸方向的位移
            i = 1; //串起整個思路的全局變量
        oBall[i-1].style.backgroundColor = '#ccc'; //默認最下面的第一個小球變色
        oBtn1.onclick = function () {
            oBannerView1.className = "banner-view";
            oBannerPic1.className = "banner-pic";
            oBannerPic1.style.cssText = "";
            for(let i=0; i<length; i++){
                oLis[i].className = `pic ${className1[i]}`;
                oLis[i].style.opacity = '1';
            }
            change1();
            arrow1();
            oBannerPic1.style.cssText = 'transform: rotateX('+xDeg[i-1]+'deg)'+'rotateY('+yDeg[i-1]+'deg)';
        };
        oBtn2.onclick = function () {
            oBannerView1.className = "banner-view1";
            oBannerPic1.className = "banner-pic1";
            oBannerPic1.style.cssText = "";
            for(let i=0; i<length; i++){
                oLis[i].className = `pic0 ${className2[i]}`;
                oLis[i].style.opacity = '1';
            }
            change2();
            arrow2();
            oBannerPic1.style.cssText = `margin-left: ${-xTranslate[i-1]}px;`;
        }
        oBtn3.onclick = function () {
            oBannerView1.className = "banner-view11";
            oBannerPic1.className = "banner-pic11";
            oBannerPic1.style.cssText = "";
            for(let i=0; i<length; i++){
                oLis[i].className = `pic00 ${className3[i]}`;
                oLis[i].style.opacity = '0';
            }
            change3();
            arrow3();
            oLis[i-1].style.opacity = `1`;
        }
        function arrow1 () {  //3D輪播左右箭頭方法
            oPrev.onclick = function () { 
                oBall[i-1].style.backgroundColor = '#f5eedc';
                i--;
                if(i < 1){
                    i = 6; 
                }
                oBannerPic1.style.cssText = 'transform: rotateX('+xDeg[i-1]+'deg)'+'rotateY('+yDeg[i-1]+'deg)';
                oBall[i-1].style.backgroundColor = '#ccc';
            }
            oNext.onclick = function () { //右箭頭相同 - - 我就不說了
                oBall[i-1].style.backgroundColor = '#f5eedc';
                i++;
                if(i > 6){
                    i = 1;
                }
                oBannerPic1.style.cssText = 'transform: rotateX('+xDeg[i-1]+'deg)'+'rotateY('+yDeg[i-1]+'deg)';
                oBall[i-1].style.backgroundColor = '#ccc';
            };
        }
        arrow2();
        function arrow2() {  //無縫輪播左右箭頭方法
            oPrev.onclick = function () { 
                oBall[i-1].style.backgroundColor = '#f5eedc';
                i--;
                if(i < 1){
                    i = 6; 
                }
                oBannerPic1.style.cssText = `margin-left: ${-xTranslate[i-1]}px;`;
                oBall[i-1].style.backgroundColor = '#ccc';
            }
            oNext.onclick = function () {
                oBall[i-1].style.backgroundColor = '#f5eedc';
                i++;
                if(i > 6){
                    i = 1;
                }
                oBannerPic1.style.cssText = `margin-left: ${-xTranslate[i-1]}px;`;
                oBall[i-1].style.backgroundColor = '#ccc';
            };
        }
        function arrow3() { //淡入淡出輪播左右箭頭方法
            oPrev.onclick = function () { 
                oBall[i-1].style.backgroundColor = '#f5eedc';
                oLis[i-1].style.opacity = "0";
                i--;
                if(i < 1){
                    i = 6; 
                }
                oLis[i-1].style.opacity = "1";
                oBall[i-1].style.backgroundColor = '#ccc';
            }
            oNext.onclick = function () { 
                oBall[i-1].style.backgroundColor = '#f5eedc';
                oLis[i-1].style.opacity = "0";
                i++;
                if(i > 6){
                    i = 1;
                }
                oLis[i-1].style.opacity = "1";
                oBall[i-1].style.backgroundColor = '#ccc';
            };
        }
/*      單邊和循環模式開發
        oPrev.onclick = function () { //左箭頭的點擊事件
            oBall[i-1].style.backgroundColor = '#f5eedc'; //這是為了上個小圓點亮起時這個小圓點恢復原來的顏色
            i--; //表示往上一個移動
            if(i < 1){
                if(bool){
                    i = 6; //當i=1時還點擊左箭頭上移 將會把6賦給i 并把6的角度賦給XY
                }
                else {
                    i = 1;
                    alert("前面已經沒有啦!");
                }
            }
            oPicbox.style.transform = 'rotateX('+ xDeg[i-1] +'deg)'+'rotateY('+ yDeg[i-1] +'deg)'; //實現讓立方體旋轉
            oBall[i-1].style.backgroundColor = '#ccc'; //讓下方對應的新的小圓點亮起
        };
        oNext.onclick = function () { //右箭頭相同 - - 我就不說了
            oBall[i-1].style.backgroundColor = '#f5eedc';
            i++;
            if(i > 6){
                if(bool){
                    i = 1;
                }
                else {
                    i = 6;
                    alert("后面已經沒有啦!");
                }
            }
            oPicbox.style.transform = 'rotateX('+xDeg[i-1]+'deg)'+'rotateY('+yDeg[i-1]+'deg)';
            oBall[i-1].style.backgroundColor = '#ccc';
        };
*/      
        function change1 () { //3D輪播下方小球方法
            for(let j=0; j<6; j++){
                oBall[j].onmouseenter = function () {
                    i = j+1;
                    oBannerPic1.style.transform = 'rotateX('+xDeg[j]+'deg)'+'rotateY('+yDeg[j]+'deg)';
                    console.log(xDeg[j]);
                    console.log(yDeg[j]);
                    for (let t = 0; t < 6; t++ ) {
                        if(t+1 === i){
                            oBall[t].style.backgroundColor = '#ccc';
                            continue;
                        }
                        oBall[t].style.backgroundColor = '#f5eedc';
                    }
                }
            }
        }
        change2();
        function change2() { //無縫輪播下方小球方法
            for(let j=0; j<6; j++){
                oBall[j].onmouseenter = function () {
                    i = j+1;
                    oBannerPic1.style.marginLeft = `${-xTranslate[j]}px`;
                    for (let t = 0; t < 6; t++ ) {
                        if(t+1 === i){
                            oBall[t].style.backgroundColor = '#ccc';
                            continue;
                        }
                        oBall[t].style.backgroundColor = '#f5eedc';
                    }
                }
                console.log(i);
            }
        }
        function change3() { //淡入淡出輪播下方小球方法
            for(let j = 0; j<6; j++){
                oBall[j].onmouseenter = function () {
                    i = j+1;
                    oLis[j].style.opacity = `1`;
                    for (let t = 0; t < 6; t++ ) {
                        if(t+1 === i){
                            oBall[t].style.backgroundColor = '#ccc';
                            oLis[t].style.opacity = `1`;
                            continue;
                        }
                        oBall[t].style.backgroundColor = '#f5eedc';
                        oLis[t].style.opacity = '0';
                    }
                }
            }
        }
    </script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 旋轉翻轉 旋轉 翻轉 漸隱切換 淡出淡進 淡出 淡進 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片翻轉 圖片旋轉 圖片淡出淡進 圖片淡出 圖片淡進 圖片切換 圖片選項卡 圖標選項卡 選項卡自動切換 漸隱切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子