用原生JS 寫Web首頁輪播圖

時間 2019-11-15

標籤原生 web 首頁欄目 JavaScript 简体版

原文原文鏈接

目前本身在學習JS中，用目前學到的東西寫了一個輪播圖，能完整的實現輪播圖的功能，可是確定仍是有不完善的地方，也但願你們能留言交流，一塊兒學習。html

1、思路

首先將功能一個一個理順，主要功能分爲三大塊：函數

（一）點擊左右按鈕，實現更換圖片並循環。學習

（二）圖片自動定時切換，當鼠標在圖片上時暫停切換，移出時恢復。spa

（三）輪播圖上導航點變換與點擊切換code

2、實現

HTML和CSS的代碼以下：htm

<!doctype html>
<head>
	<title>輪播圖</title>
	<meta charset="utf-8">
	<style>
		*{
			padding:0;
			margin:0;
			box-sizing: content-box;
			text-decoration: none;
		}
		
		#container {
			width:600px;
			height:300px;
			border:1px red solid;
			overflow: hidden;
			position: relative;
		}
		
		#list {
			position: absolute;
			z-index: 1;
			width: 3000px;
		}
	
		#list img {
			width: 600px;
			height: 300px;
			padding: 0;
			margin: 0;
		}
		
		#prev {
			position: absolute;
			top: 40%;
			left: 0;
			height:70px;
			width: 30px;
			z-index: 2;
		}
		
		#next {
			position: absolute;
			top: 40%;
			right: 0;
			height:70px;
			width: 30px;
			z-index: 2;
		}
		
		#list-buttons {
			position: absolute;
			bottom: 5%;
			z-index: 2;
			width:600px;
			text-align: center;
		}
		
		#list-buttons span{
			display: inline-block;
			width: 10px;
			height: 10px;
			background-color: #ffffff;
			border-radius: 100%;
		}
      
        #list-buttons .on{
            background-color: #b2b2b2;
        }
	</style>
</head>
<body>
	<div id="container">
		<div id="list" style="left: 0px;"> <!-- 0px爲初始位置 -->
			<img src="img-01.jpg" alt="1">
			<img src="img-02.jpg" alt="1">
			<img src="img-03.jpg" alt="1">
		</div>
		<div id="list-buttons">
			<span class="on"></span>
			<span></span>
			<span></span>
		</div>
		<div>
			<button id="prev" class="button" type="button"><</button>
			<button id="next" class="button" type="button">></button>
		</div>
	</div>
<body>

（一）左右按鈕切換圖片

首先取得操做切換圖片的元素：blog

var prev = document.getElementById('prev'); 
var next = document.getElementById('next');

而後我用三張圖片組成了一串圖片條，以圖片條的左邊緣做爲圖片的起始位置，經過不斷修改圖片的起始位置，從而讓圖片顯示在可顯示的區域裏。索引

這裏寫了兩個函數，分別對應左右的切換按鈕。事件

這裏圖片的寬段是600px，要點擊next按鈕讓圖片切換下一張，那就得在讓圖片條向左移動600px。爲了讓切換的圖片可以循環，當到達最後一張圖片的位置時，再點擊下一張按鈕，就會重置到第一張圖片，以此循環。圖片

　　　　var initial = parseInt(list.style.left); //listImage的初始數值

　　　　function nextMove(){
        initial -= 600; //圖片向左滑動
          if(initial < -1200){
              initial = 0;
          }
        list.style.left = initial + 'px';
        //調用dot函數，判斷當前點的位置
        dot(); 
      }
      
      function prevMove(){
        initial += 600; //圖片向右滑動
          if(initial > 0){
              initial = -1200;
          }
        list.style.left = initial + 'px'; 
      }

（二）圖片自動定時切換與當鼠標在圖片上時暫停切換，移出時恢復

要實現定時自動播放，那就得用window.setInterval（）方法，在指定的時間間隔調用函數，同時將它返回的值賦給變量time，這裏就實現了自動切換。

var time = window.setInterval(nextMove, 2000);

.setInterval（）方法還有一個對應的clearInterval()方法，用來取消調用函數。因此我就寫了一個函數，來判斷鼠標的狀態是移進仍是移出，並給圖片區域綁定了事件處理程序，這樣當鼠標移進就會暫停，移出繼續。

 　　  var container = document.getElementById('container');

 　　　container.addEventListener('mouseenter', state, false);
      container.addEventListener('mouseleave', state, false);
      
      function state(eventName){
        switch(eventName.type){
          case 'mouseenter':
            window.clearInterval(time);
            break;
            
          case 'mouseleave':
            time = window.setInterval(nextMove, 2000);
            break;
        }
      }

（三）輪播圖上導航點變換與點擊切換

首先要實現點跟着圖片進行變換，因此聲明一個函數，判斷當前圖片條的位置，來對應設置相應位置的導航點樣式，並取消其餘導航點的樣式。

　　　var listBtn = document.getElementsByTagName('span');

　　　function dot(){
        switch(initial){
          case 0:
            console.log('0px');
            listBtn[0].className = 'on';
            listBtn[1].className = '';
            listBtn[2].className = '';
            break;

          case -600:
            console.log('-600px');
            listBtn[0].className = '';
            listBtn[1].className = 'on';
            listBtn[2].className = '';
            break;

          case -1200:
            console.log('-1200px');
            listBtn[0].className = '';
            listBtn[1].className = '';
            listBtn[2].className = 'on';
            break;
        }
      }

最後就是當點擊相應的導航點時，跳轉到對應的圖片上了。爲此，我給每一個導航點添加了一個索引屬性，再經過判斷點擊的是第幾個導航點，切換到對應的圖片位置就能夠了。

for(let i = 0; i < listBtn.length; i++){
        listBtn[i].index = i;
        listBtn[i].addEventListener('click', function(){
          switch(listBtn[i].index){
            case 0:
              initial = 0;
              dot();
              list.style.left = '0px';
              break;
              
            case 1:
              initial = -600;
              dot();
              list.style.left = '-600px';
              break;
              
            case 2:
              initial = -1200;
              dot();
              list.style.left = '-1200px';
              break;
          }
        }, false);
      }