js的dom案例1

阿新 • • 發佈：2022-05-09

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>