學前端已經一年多了，在JavaScript方面，學會了基本語法，頁面操作之後，慢慢走向了框架這條不歸路，框架用起來真的是省時省力，效果好、程式碼少、還節省時間。

在前幾天去做一個頁面的時候，要求只能是用以前版本的框架，我就去找框架之前的版本，可是在某些官網上老版本的框架已經不存在了，就我這暴脾氣，還是用原生的JS去寫吧，不是不知道，一試還真的能嚇一跳，做到輪播圖的時候，感覺自己不會了，索性就去把內容回顧了一遍。

從根本去學習的，所以非常適合初學者的第一次學做輪播，大神們口下留情。

現在把這個輪播圖分享給大家。

Html佈局

    首先父容器container存放所有內容，子容器list存在圖片。子容器buttons存放按鈕小圓點。

<div id="container">
        <div id="list">
            <img src="img/3.jpg" alt="1" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/1.jpg" alt="3" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
 

在做的時候會出現一些問題就是各個圖片之間會出現縫隙，可以自己去查一下解決方法，我就不具體說了，我只說我的處理方法：就是將個圖片程式碼之間的空格刪去，如下

<img src="img/3.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="2" /><img src="img/3.jpg" alt="3" /><img src="img/1.jpg" alt="3" />

css修飾

css修飾我就不寫了，不會css的一般不會去了解輪播圖的，hahaha~~~~~~~

JS

var list = document.getElementById('list');
	var prev = document.getElementById('prev');
	var next = document.getElementById('next');
	var Broadcast = document.getElementById("container");
	var Rwidtn = Broadcast.offsetWidth;
	function animate(distance) {
		var newLeft = list.offsetLeft + distance;
		list.style.left = newLeft + 'px';
		if(newLeft<-3*Rwidtn){
			setTimeout(function(){
				list.style.transition="0s";
				list.style.left = - Rwidtn + 'px';
				setTimeout(function(){
					list.style.transition="1.5s";
				},100);
			},1500);
			
		 }
		 if(newLeft>-Rwidtn){
		 	setTimeout(function(){
		 		list.style.transition="0s";
		 		list.style.left = - 3*Rwidtn + 'px';
		 		setTimeout(function(){
					list.style.transition="1.5s";
				},100);
		 	},1500);
		 }
	}
	prev.onclick = function() {
		animate(Rwidtn);
	}
	next.onclick = function() {
		animate(-Rwidtn);
	}
	var timer;
	function play() {
	    timer = setInterval(function () {
	        next.onclick()
	    }, 4000)
	}
	play();
    function stop() {
        clearInterval(timer);
    }
    Broadcast.onmouseover = stop;
    Broadcast.onmouseout = play;

這些是全部js程式碼，下面我經詳細的介紹每一塊的作用。

首先就是  var Rwidtn = Broadcast.offsetWidth; 因為我的是鋪滿的輪播，我獲取了寬度，也可以直接使用定值

 接下來是函式

function animate(distance) {
		var newLeft = list.offsetLeft + distance;
		list.style.left = newLeft + 'px';
		if(newLeft<-3*Rwidtn){
			setTimeout(function(){
				list.style.left = - Rwidtn + 'px';
			},1500);
			
		 }
		 if(newLeft>-Rwidtn){
		 	setTimeout(function(){
		 		list.style.left = - 3*Rwidtn + 'px';
		 	},1500);
		 }
	}

將上一頁、下一頁通過函式的方式去寫，這是一個好的編碼習慣，同樣方便程式碼的管理，以及執行

接下來是讓他自己動起來，同樣去使用函式

var timer;
	function play() {
	    timer = setInterval(function () {
	        next.onclick()
	    }, 4000)
	}
	play();

最後就是當用戶想要去看某張圖片的時候的暫停效果

 function stop() {
        clearInterval(timer);
    }
    Broadcast.onmouseover = stop;
    Broadcast.onmouseout = play;

這樣一個簡單的輪播圖就基本上實現了，其他的就不去詳細地介紹了。