JS-案例-三种轮播图写法（一）

第一种

点击右侧小图，对应大图变换类型

DOM构建元素，样式。

初始状态函数

<script>
        var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"];
        var iconArr=["./img/icon_a.jpeg","./img/icon_b.jpeg","./img/icon_c.jpeg","./img/icon_d.jpeg","./img/icon_e.jpeg"];
        var pre;
        init();
        function init() {
            document.body.style.margin="0px";
            var div=createBg(document.body);
            createIcon(div);
        }

大图div部分函数，获取div，编写样式

 function createBg(parent) {
            var div=document.createElement("div");
            Object.assign(div.style,{
                width:document.documentElement.offsetWidth+"px",
                height:document.documentElement.offsetWidth/3+"px",
                backgroundImage:"url("+imgArr[0]+")",
                backgroundSize:"100% 100%",
                transition: "all 1s"
            });
            parent.appendChild(div);
            return div;
        }

右侧标签小图部分函数，小图样式并添加点击事件

function createIcon(parent) {
            var margin=40;
            var padding=10;
            var height=(parent.offsetHeight-2*margin-4*padding)/iconArr.length;
            for(var i=0;i<iconArr.length;i++){
               var img=new Image;
               if(i===0) pre=img;
                img.src=iconArr[i];
                Object.assign(img.style,{
                    position:"absolute",
                    display:"block",
                    height:(height-4)+"px",
                    right:"50px",
                    top:margin+i*(height+padding)+"px",
                    border:"2px solid"+ (i===0 ? "#ff9d00" : "rgba(0,0,0,0)")
                });
                parent.appendChild(img);
                img.addEventListener("click",clickHandler);
            }
        }

点击事件函数，小图边框变化，对应大图变换

function clickHandler(e) {
            var arr = Array.from(this.parentElement.children);
            var index = arr.indexOf(this);
            this.parentElement.style.backgroundImage = "url(" + imgArr[index] + ")";
            pre.style.border = "2px solid rgba(0,0,0,0)";
            pre = this;
            pre.style.border = "2px solid #ff9d00";
        }

    </script>