js的dom案例1

DOM的案例

点击1个按钮换图片
点击不同的按钮切换不同的图片
点击按钮，然后图片滑动切换（css3 transform滑动效果）
实现选中状态,非选中状态，通过className属性

 遇到的问题
 图片有路径，但是在浏览器没有显示出？
 绝对路径可以显示出来
 
 解决方法：
 ../../就可以到前面的层了

案例1
 点击按钮换图片
 //获取按钮 对象
 //获取img 对象
 //给按钮的点击事件绑定=监听函数
 //函数里面是 图片的src属性被修改 
 
 
 
 
 
 <div>
         <img src="../../images/bannerroll (1).jpg" alt="">
     </div>
     <button>1</button>
 
     <script>
         var btn=document.querySelector('button');
         var img=document.querySelector('img')
 
         btn.onclick=function(){
             img.src='../../images/bannerroll (2).jpg';
 
         }
 
     </script>

案例2
 点击不同的按钮 切换不同的图片
 
 //获取按钮 图片对象
 //创建图片src内容的数组，存放图片的src的地址
 //遍历按钮对象，绑定事件
 //事件内容就是图片的src的值在换
 
 <div>
         <img src="../../images/bannerroll (1).jpg" alt="">
 </div>
 <button>1</button>
 <button>2</button>
 <button>3</button>
 
 <script>
     //获取 图片 按钮   对象
 var img=document.querySelector('img');
 var btns=document.querySelectorAll('button');
 //创建 数组  存放图片地址
 let imgSrcList=['../../images/bannerroll (1).jpg','../../images/bannerroll (2).jpg','../../images/bannerroll (3).jpg'];
 
 //遍历按钮集合
 for(let i in btns){
  //绑定事件
 btns[i].onclick=function(){
  //图片的地址在改变
 img.src=imgSrcList[i];
 }
 }

案例2升级版
 点击按钮，然后图片滑动切换
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>滑动图片切换</title>
     <style>
         .swiper{
             width: 400px;
             height: 600px;
             margin: 0 auto;
             overflow: hidden;
             //定位父元素按钮
             position: relative;
         }
         .swiper .img_container{
             width:1200px;
            //图片横排
             display: flex;
             transition: 0.4s;
 
         }
         .swiper .img_container img{
             width:400px;
         }
         .btn{
             //按钮绝对定位出来
             position: absolute;
             bottom: 0;
         }
 
     </style>
   </head>
   <body>
     <div class="swiper">
       <div class="img_container">
         <img src="../../images/bannerroll (3).jpg" alt="" />
         <img src="../../images/bannerroll (5).jpg" alt="" />
         <img src="../../images/bannerroll (6).jpg" alt="" />
       </div>
       <div class="btn">
           <button>1</button>
           <button>2</button>
           <button>3</button>
       </div>
     </div>
     <script>
         let container=document.querySelector('.swiper .img_container');
         let btns=document.querySelectorAll('button');
         for(let i in btns){
             btns[i].onclick=function(){
                 container.style.transform=`translate(${i*-400}px)`
             }
         }
 
 
 
     </script>
   </body>
 </html>

案例3
 实现选中状态,非选中状态，通过className属性
 
     <style>
         .active{
             background-color: red;
         }
     </style>
 </head>
 <body>
     <h1>HEllo Word!</h1>
     <h1>HEllo Word!</h1>
     <h1>HEllo Word!</h1>
     <h1>HEllo Word!</h1>
     <h1>HEllo Word!</h1>
     
     <script>
         //利用className实现选中和取消选中的方法
         let h1List=document.querySelectorAll('h1');
                for(let i in h1List){
             h1List[i].onclick=function(){
                 // this.className='active';
                 //条件判断需要使用等等等号
                 if(this.className==='active'){
                     this.className='';
                 }else{
                     this.className='active';
                 }
             }
         }
     </script>

posted @ 2022-05-09 17:41 cascadingjia 阅读(79) 评论(0) 收藏举报

刷新页面返回顶部

cascadingjia

js的dom案例1

公告