# jQuery 各種應用

## 幻燈片
#### 作法一

>邏輯：利用id，取出圖片的值、再更換
每一張小圖都設置id="s1"/"s2"/"s3"

$("#S1").click( function(){
var img = $(this).attr("src");
$("#big").attr("src","要更換的圖片")
});

#### 作法二
>邏輯：利用img抓圖片，利用if,else

$("img").click(function(){
    var img = $(this).attr(src)
    var imd_id = $(this).attr(id)
    if (imd_id!= "big"){
        $("#big").attr("src",img)
    }  
});

<script>
       $( function (){
         $ ("img").click( function() {
          var img = $(this).attr("src");
          var img_class = $(this).attr("class");
          if (img_class != "img-big") {
            $(".img-big").attr("src",img)
          }
         })
       })
</script>

#### 作法三(最精簡)
> 邏輯：利用兩個class
>`<img src="./img/bread.PNG" alt="" class="img04 img">`

<script>
    $( function (){
      $(".img").click( function(){
        var img = $(this).attr("src");
        $(".img-big").attr("src",img);
      });
    })
  </script>