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

第二种

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

CSS编写样式，JS构建点击事件函数

css样式

 <style>
        body{
            margin: 0;padding: 0;}
        div{
            width:100%;
            height: 455px;
            background-image:url("./img/a.jpeg");
            background-size: 100% 100%;
            transition: all 1s;
        }

        img{
            position: absolute;
            display: block;
            right: 50px;
            top: 40px;
            border: 2px solid rgba(0,0,0,0);
        }
        img:nth-child(1){
            border: 2px solid #ff9d00;
        }
        img:nth-child(2){
            top: 121px;}
        img:nth-child(3){
            top:202px;}
        img:nth-child(4){
            top: 283px;}
        img:nth-child(5){
            top: 364px;}
    </style>

html结构

 <div>
        <img src="img/icon_a.jpeg">
        <img src="img/icon_b.jpeg">
        <img src="img/icon_c.jpeg">
        <img src="img/icon_d.jpeg">
        <img src="img/icon_e.jpeg">
    </div>

初始状态函数，获取所有img并建立点击事件

 <script>
        var pre;
        var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"];
        init();
        function init() {
            var imgs=document.getElementsByTagName("img");
            for (var i=0;i<imgs.length;i++){
                imgs[i].addEventListener("click",clickHandler);
            }
            pre=imgs[0];
        }

点击事件函数，大图变换，边框变换

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

        }
    </script>