今天是第三週的最後一天，時間真的過得好快喔!

本日的應該算是設計各個頁面最後的部分了吧?
那就來最後設計大衝刺!

今天做出來的成品是長這樣喔:

總而言之就是左右切換圖片牆!

這功能算是我很喜歡的一部份，可以互動又很多變。超讚的!

.html

<div class="imgstyle">
    <div class="imgs" style="width:7000000px;">
//會把寬社的這麼常是因為為了讓圖片們好好的排在一行內
      <img src="./pic/375602.jpg" width="700" class="imgs" />
      <img src="./pic/375603.jpg" width="700" class="imgs" />
      <img src="./pic/375604.jpg" width="700" class="imgs" />
      <img src="./pic/375605.jpg" width="700" class="imgs" />
      <img src="./pic/375606.jpg" width="700" class="imgs" />
      <img src="./pic/375607.jpg" width="700" class="imgs" />
    </div>
    <div>
      <div onclick="pre()" style="float:left;cursor:pointer">上一頁</div>
      <div onclick="nex()" style="float:right;cursor:pointer">下一頁</div>
    </div>
  </div>

左右切換的按鈕可以用圖片替換也沒問題喔!

.css

.imgstyle{
  padding: 0px;
  width:700px;
  height: 560px; 
  overflow:hidden;
  margin: auto;
}
.imgs{
  float: left;
  padding: 0px;
}

在head裡加入:

<script>
    var cot = 0;
    function nex() {
      if (cot <= 4) {
        $('.imgs img').eq(cot).animate({ 'margin-left': '-700px' }, 700);
        cot++;
      }
    }
    function pre() {
      if (cot > 0) {
        cot--;
        $('.imgs img').eq(cot).animate({ 'margin-left![/images/emoticon/emoticon29.gif](/images/emoticon/emoticon29.gif)': '0' }, 700);
      }
    }
  </script>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

在css裡面如果少了.imgstyle就會變成下面這個樣子，很清楚的每張圖片都排成一行。

加入.imgstyle就能設定一個區塊可以顯示出圖片，而超過的部分必須藉由前後鍵來操控。
那為什麼圖片可以成功被遮起來?
就是因為overflow:hidden的功勞啦!

再來談一下head裡面的內容。
當初我們設定一張圖片寬是700px，所以每當切換一張照片勢必要移動700px才算是完整切換嘛!
所以可以看到裡面的function nex()、function pre()都是設定按一下移動700px。
而if裡面的數字為什麼要用4和0我目前還不太知道，是逐一挨著試才試出的結果。如果有大神知道的話，拜託留言告訴我喔!

圖片牆參考資料:

https://www.google.com/imgres?imgurl=https%3A%2F%2Fcodertw.com%2Fwp-content%2Fuploads%2Fimg%2F74fTZ4Ja8v.jpg&imgrefurl=https%3A%2F%2Fcodertw.com%2F%25E7%25A8%258B%25E5%25BC%258F%25E8%25AA%259E%25E8%25A8%2580%2F740868%2F&tbnid=7Qxfn83UzYSzwM&vet=12ahUKEwiUyZOwqMn6AhWdTPUHHfPjCMMQMygCegQIARBJ..i&docid=5rXrOhzJTwFfRM&w=640&h=278&q=%E5%9C%96%E7%89%87%E5%BC%B7%E5%B7%A6%E5%8F%B3%E5%88%87%E6%8F%9B&ved=2ahUKEwiUyZOwqMn6AhWdTPUHHfPjCMMQMygCegQIARBJ
當初這連結是可以成功瀏覽的，不過發文的今天好像就不能瀏覽了。

以上是我開賽的第二十一天，讓我們來期待第二十二天的到來吧!
加油、加油! 倒數9天。