DOM+JS+轮播图+无时间

最新推荐文章于 2024-07-01 16:12:06 发布

mustang(野马）

最新推荐文章于 2024-07-01 16:12:06 发布

阅读量203

点赞数

分类专栏： js案例

本文链接：https://blog.csdn.net/weixin_45000381/article/details/95195281

版权

js案例专栏收录该内容

26 篇文章 1 订阅

订阅专栏

DOM+JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
        {
            margin: 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;
            border:2px solid rgba(0,0,0,0);/*一开始就添加边框，目的是为了点击的时候不出现新的边框增而改变页面的布局*/
            top:40px
        }
        img:nth-child(1){   
            border: 2px solid #ff9d00;   /*一开始默认有边框的，只有第一个默认有边框*/
        }
        img:nth-child(2){    /*下面是从绝对定位中把imgtop高度不同，*/
            top:121px;  
        }
        img:nth-child(3){
            top:202px;
        }
        img:nth-child(4){
            top:283px;
        }
        img:nth-child(5){
            top:364px;
        }

    </style>
</head>
<body>
    <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>
   <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");   //获取标签名为img的。得到的是nodelist，
            for(var i=0;i<imgs.length;i++){   //遍历imgs并给每个类数组添加，点击事件
                imgs[i].addEventListener("click",clickHandler);
            }
            pre=imgs[0];//pre  赋值第一张imgs
        }

        function clickHandler(e) {  //执行函数操作，
                 console.log(this);//被点击
                 console.log(this.parentElement);//被点击的父元素
                 console.log(this.parentElement.children);// 获得的是元素集合
            var arr=Array.from(this.parentElement.children); //被点击父元素的子元素，并且利用Array.from 把伪数组转为数组
     //this.parentElement.children,这个this是被点击元素，被点击元素的父容器的子元素，这个this是被点击的img
                 console.log(arr);
            var index=arr.indexOf(this);  //返回下标，被点击的元素，在这个数组中的下标是多少，没有是返回的-1。有就会返回对应的下标值
                 console.log(index);//
            var div=document.querySelector("div");  //获取元素，注意这里的querySelecto只能获取第一个，需要获取多个的时候要注意了
            div.style.backgroundImage="url("+imgArr[index]+")";//div.样式.背景图片=上面设置的imgArr数组，下标第几个，index 来自于 点击触发获取的，
            pre.style.border="2px solid rgba(0,0,0,0)";//  被点击时候，默认选中的颜色会发生变化
            pre=this;  //被选中
            pre.style.border="2px solid #ff9d00";  //给被选中的添加样式
        }
   </script>
</body>
</html>

<!-- 首先大脑构思出要过图
1、背景是大图（或者不是背景图）
2、两种图片，（大图是背景，小图是导航作用）
3、处理两种图片大小问题，小图要利用定位脱离文档流
4、点击小图，大图跟着变化对应图片，————利用数组，他们的indexOf一样，就可以实现变化
5、大图变化的是图片的URL连接地址
------步骤-------
1、设置大图div，设置样式（背景、图片给初始值），
2、给小图设置好，div包裹着小图img 绝对定位、top 和 right 、
3、DOM元素部分、style部分、js部分
4、js写脚本，大图地址设定（数组形式，每个元素就是一个地址）
5、获取img元素，添加点击事件，（作用点击换图片/换边框颜色）
6、事件部分，获取点击元素的父元素的子元素，转换为数组，获取index
7、根据index分别设置当前点击的元素小图的border和大图的URL+${imgArr[index]}
–>