JavaScript仿京東輪播圖效果

Posted on by

本文實例為大傢分享瞭JavaScript實現京東輪播圖效果展示的具體代碼，供大傢參考，具體內容如下

做瞭一個仿京東的輪播圖，當然沒有人傢官網的精美啦。

主要技術點：

每隔3秒自動切換圖片；
鼠標移入圖片自動暫停切換，鼠標移出則繼續；
點擊左右方向按鈕手動切換圖片；
鼠標移到灰色圓點，顯示對應的圖片，並加亮顯示。

HTML代碼：

<body>
 <h1>輪播圖展示</h1>
 <div id="did">

  <!-- 圖片 -->
  <div id="img-div" onmouseover="doStop()" onmouseout="doStart()">
   <img src="./1.jpg">
   <img src="./2.jpg">
   <img src="./3.jpg">
   <img src="./4.jpg">
   <img src="./5.jpg">
   <img src="./6.jpg">
   <img src="./7.jpg">
   <img src="./8.jpg">
  </div>

  <!-- 左右按鈕 -->
  <div id="btn-div">
   <div id="left-btn" onclick="doLeftClick()">
    <h3> < </h3>
   </div>
   <div id="right-btn" onclick="doRightClick()">
    <h3> > </h3>
   </div>
  </div>

  <!-- 圓點 -->
  <div id="cir-div">
   <div onmouseover="doMove(1)"></div>
   <div onmouseover="doMove(2)"></div>
   <div onmouseover="doMove(3)"></div>
   <div onmouseover="doMove(4)"></div>
   <div onmouseover="doMove(5)"></div>
   <div onmouseover="doMove(6)"></div>
   <div onmouseover="doMove(7)"></div>
   <div onmouseover="doMove(8)"></div>
  </div>
 </div>

</body>

CSS代碼：

<style>
 * {
  margin: 0px;
  padding: 0px;
 }

 body {
  background-color: rgb(255, 249, 249);
 }

 h1 {
  text-align: center;
  padding-top: 40px;
  color: rgba(250, 54, 129, 0.562);
 }

 #did {
  position: relative;
  width: 590px;
  height: 470px;
  margin: 30px auto;
 }

 #img-div {
  position: absolute;
 }

 #img-div img {
  width: 590px;
  display: none;
  cursor: pointer;
  z-index: -1;
 }

 /* 這兩段可不加 */
 /* 顯示第一張圖片 */
 #img-div img:first-child {
  display: block;
 }

 /* 點亮第一個圓點 */
 #cir-div div:first-child {
  background: #fff;
 }

 #cir-div {
  position: absolute;
  /* 相對於圖片的位置 */
  left: 40px;
  bottom: 25px;
 }

 /* 下方圓點 */
 #cir-div div {
  width: 8px;
  height: 8px;
  float: left;
  /* 50%時為圓形 */
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid rgba(0, 0, 0, .05);
  background: rgba(255, 255, 255, .4);
 }

 #left-btn {
  position: absolute;
  /* 相對於圖片的位置 */
  top: 45%;

  /* 左半圓按鈕 */
  width: 27px;
  height: 38px;
  background: rgba(119, 119, 119, 0.5);
  border-radius: 0 20px 20px 0;
  /* 動畫效果，放在變化前，當鼠標移動上面時，會緩慢變色 */
  transition: background-color 0.3s ease-out;
 }

 #right-btn {
  position: absolute;
  /* 相對於圖片的位置 */
  top: 45%;
  right: 0px;

  /* 右半圓按鈕 */
  width: 27px;
  height: 38px;
  background-color: rgba(119, 119, 119, 0.5);
  border-radius: 20px 0 0 20px;
  /* 動畫效果，放在變化前，當鼠標移動上面時，會緩慢變色 */
  transition: background-color 0.3s ease-out;
 }

 #left-btn:hover {
  background-color: rgba(32, 32, 32, 0.5);
  cursor: pointer;
 }

 #right-btn:hover {
  background-color: rgba(32, 32, 32, 0.5);
  cursor: pointer;
 }

 #left-btn h3 {
  color: #fff;
  margin-top: 4px;
  margin-left: 2px;
 }

 #right-btn h3 {
  color: #fff;
  margin-top: 4px;
  margin-left: 8px;
 }
</style>

JavaScript代碼：

<script>
 //顯示第幾張圖片
 var count = 1;
 //時間
 var time = null;
 //圖片列表
 var imglist = document.getElementById("img-div").getElementsByTagName("img");
 //圓點列表
 var cirlist = document.getElementById("cir-div").getElementsByTagName("div");

 //展示對應的圖片和點亮對應的圓點
 function show(x) {
  for (var i = 0; i < imglist.length; i++) {
   if (x == i + 1) {
    //顯示圖片
    imglist[i].style.display = "block";
    //圓點點亮
    cirlist[i].style.backgroundColor = "#fff";
   } else {
    imglist[i].style.display = "none";
    cirlist[i].style.background = "rgba(255, 255, 255, .4)";
   }
  }
 }

 //定時輪播圖片(每3秒切換一張圖片)
 function doStart() {
  if (time == null) {
   time = setInterval(function () {
    count++;
    show(count);
    if (count >= 8) {
     count = 0;
    }
   }, 3000);
  }
 }

 //停止輪播圖片
 function doStop() {
  if (time != null) {
   clearInterval(time);
   time = null;
  }
 }

 //鼠標移到圓點上圖片會相應切換，並且之後會點亮下一個圓點 而不是未移到圓點前的下一個圓點
 function doMove(x) {
  show(x);
  //將位置賦給count，圖片就會從該圖片的下一張開始切換
  count = x;
  //當鼠標移到最後一個圓點時，需要將count變為0,不然執行doStart()裡的count++，count就會變為9，越界瞭
  if (count == 8) {
   count = 0;
  }
 }

 /*
  對於i 、count和show(x)裡x的關系：
   i = [0,7];
   x = [1,8];
   count = [1,8];
 */
 //點擊左邊按鈕向左切換圖片
 function doLeftClick() {
  for (var i = 0; i < imglist.length; i++) {
   //判斷當前在展示的是哪張圖片
   if (imglist[i].style.display == "block") {
    if (i == 0) {
     show(8);
     // 忘掉這句後，break會直接退出，當左按鈕按到最右的圓點，會直接忽略圓點1，直接跳到圓點2
     count = 0;
     //保證切換是3秒鐘
     doStop();
     doStart();
     break;
    }
    show(i);
    count = i;
    //保證切換是3秒鐘
    doStop();
    doStart();
    break;
   }
  }
 }

 //點擊右邊按鈕向右切換圖片
 function doRightClick() {
  for (var i = 0; i < imglist.length; i++) {
   //判斷當前在展示的是哪張圖片
   if (imglist[i].style.display == "block") {
    if (i == 7) {
     show(1);
     count = 1;
     doStop();
     doStart();
     break;
    }
    show(i + 2);
    count = i + 2;
    //就不會出現切換到沒有圖片的情況
    if (count >= 8) {
     count = 0;
    }
    doStop();
    doStart();
    break;
   }
  }
 }

 doStart();
 //默認打開頁面顯示的是第一張圖片
 //（不加，會出現第1個圓點亮也就是剛打開頁面時，左按鈕沒反應）
 doMove(1);
</script>

遇到的難點：

雖說輪播圖看起來還蠻簡單的，但實現起來還挺多問題的。不過我發現的都解決掉瞭。

  • 圓點與按鈕放置在圖片上
  • 自動切換圖片瞭但對應的圓點沒有點亮
  • 鼠標移到圓點上圖片切換瞭，但下一個自動點亮的圓點卻是未移到圓點前的下一個
  • 第1個圓點亮也就是剛打開頁面時，左按鈕沒反應
  • 當左按鈕按到最右的圓點，會直接忽略圓點1，直接跳到圓點2
  • 在最後一個圓點時點擊右按鈕時，會出現切換到沒有圖片的情況
  • 點左按鈕切換時間大概2秒，點右按鈕切換時間大概5秒，時間並沒有達到標準的3秒

不過我都解決啦！

最大的感觸就是剛解決掉一個bug正沾沾自喜時，又來一個bug。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：