昨天把slide show加上樣式了

<div class="slideshow-container">
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/000/ffffff&text=Slide+1">
		<div class="text">First picture</div>
	</div>
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/333/ffffff&text=Slide+2">
		<div class="text">Second picture</div>
	</div>
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/999/ffffff&text=Slide+3">
		<div class="text">Third picture</div>
	</div> <!-- 加上三張要slideshow的圖片 -->
	<a class="prev">❮</a>
	<a class="next">❯</a> <!-- "<"、">"兩種符號，可以點擊下一張和上一張 -->
</div>
<br>
<div class="dotBar">
	<span class="dot"></span> 
	<span class="dot"></span> 
	<span class="dot"></span> 
</div> <!-- 加上可以點擊的小點，點擊可以換圖片的那種 -->

.slideshow-container {
	 max-width: 600px;
	 position: relative;  
	 margin: auto;
}

/* 設定slide show的圖片先不顯示 */
.mySlides {
	display: none;
	/* 將圖片預設為不要顯示 */
}

/* 設定兩個在圖片左右兩邊的箭號 */
.prev, .next {
	cursor: pointer;
	/* 改變滑鼠游標的造型，變成手指 */
	position: absolute;
	/* 相對於它的父元素(slideshow-container)進行定位 */
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 18px;
	color: white;
	font-weight: bold;
	font-size: 18px;
}

/* 將下一張的按鈕放置到slide的最右方 */
.next {
  right: 0;
}

/* 下方 picture的 text說明 */
.text {
  color: #fff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* slide show下方的 dot，點擊可以切換圖片 */
.dotBar {
  text-align: center;
}

.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
}

/* active以及hover的 dot會改變顏色 */
.active, .dot:hover {
  background-color: #717171;
}

接下來得寫JavaScript來控制...

var slideIndex = 1;
showSlides(slideIndex);

// 點擊"<" ">"時，可以改變slide index
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// 最下方的dot，點擊切換slide
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  //當slideIndex大於slide的長度時，在這裡就是3，自動跳回1
  if (n < 1) {slideIndex = slides.length}
  //當slideIndex小於1，也就是已經第一張了，還一直點上一張，自動跳到最後一張。
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }

  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}

最後的loop和最後兩行寫了些甚麼...
之後再來研究看看...
試著做的slide
google之後，發現現在大多是用plugin來做，
以後有機會就來研究看看。