JS原生輪播（JS篇）
阿新 • • 發佈：2019-02-15
接著上一篇，我接下來寫關於JS的部分，我會按照我當時的思路一步一步的寫，在最後附上全部的程式碼
一開始我打算寫最簡單的圖片切換功能，怎麼寫呢?當我們點選左右箭頭的時候是用改變left的值，有了思路就很好寫了
//首先我們要獲取我們需要的屬性和id
var prev=document.getElementById("prev")；
var next=document.getElementById("next");
var imgs=document.getElementById("contain_imgs");
//之後我們要新增點選事件
prev.onclick=function 
完成了這步，那下一步我們幹什麼呢？我準備做按鈕，按鈕的切換變色，和切換變圖
也就是說我點了第一個按鈕第一個按鈕變成紅色，表示我點選的，圖片也切換到第一張，以此類推。
還有我點選箭頭來切換圖片時，我的按鈕也跟著變色，一次這麼多需要寫那麼該怎麼寫呢？
//首先我們先寫最簡單的，也就是當我們點選箭頭來切換圖片時下面的按鈕會跟著變化，
//也就是說我們還需要向上面的click中寫程式碼
var count=0;//用來定位按鈕是第幾個
var span=document.getElementsByTagName("span");//獲取按鈕
function showspan(){
for(i=0;i<span.length;i++){
if(span[i].className=='on')//一開始我們先消除帶有on的，讓所有按鈕都沒有
span[i].className='';
}
span[count].className='on';之後根據計數，來鎖定那個按鈕需要加上on
}
prev.onclick=function(){//這是左箭頭的程式碼，右箭頭的不再寫了
move(1024);
if(count==0){//如果到頭了，就回到最後一個
count=3;
}
else
count--;否則就減一
showspan();
}
//下一步，我們開始寫按鈕的點選事件
for (var i = 0; i < span.length; i++) {
span[i].id=i;//先給每個按鈕一個索引，方便定位
span[i].onclick=function(){
if(this.className=='on'){//如果點選的按鈕本來就是選中的，則不做任何改變
return;
}
index=this.id;//這裡做一個計數器
var offset=-1024*(index-count);//因為我們需要點按鈕按鈕便可以切換到相應的圖片，所以
//需要計算距離，也就是我們的偏移量，index代表我們點選圖片的索引，count代表原來圖片的索引
move(offset);
count=index;//我們再將圖片索引重新定位到現在的位置
showspan();
}
}//這樣我們按鈕的就做完了我們接下來就需要寫自動播放功能，這個就簡單多了，用定時器就可以
var interval=3000;
function play() {
timer = setInterval(function () {
next.onclick();
}, interval);
}
function stop() {
clearInterval(timer);
}
contain.onmouseover = stop;//當滑鼠移到圖片上就停止移動
contain.onmouseout = play;//移出就繼續
play();//執行函式那麼接下來便是最難的地方，便是動畫效果，我們需要自己定義動畫，也就是在之前的move函式中新增
動畫效果
function move(offset){
animated = true;//用來防止惡意點選動畫的，最後來說
var time = 1000;//設定動畫總的時間
var inteval = 10;//多長時間執行一次函式
var speed = offset/(time/inteval);//我們是1024的寬，需要10步走完，就這個意思
//相除便是速度，
var left=parseInt(imgs.style.left)+offset;
var amimate=function(){//動畫部分
if ( (speed > 0 && parseInt(imgs.style.left) < left) || (speed < 0 && parseInt(imgs.style.left) > left)) {//來判斷我的動畫是想往那邊走，最多走一張圖
imgs.style.left = parseInt(imgs.style.left) + speed + 'px';
//這就是動畫在慢慢的加
setTimeout(amimate, inteval);//我們用遞迴一次次呼叫，直到if不成立
}else{
//如果不成立也就代表我們走完了一張圖，
imgs.style.left = left + 'px';
if(parseInt(left)>-1024){
imgs.style.left=-3072+"px";
return;
}
if(parseInt(left)<-4096){
imgs.style.left=-1024 +"px";
return;
}
animated = false;
}
}
amimate();
}完整程式碼
window.onload=function(){
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var imgs=document.getElementById("contain_imgs");
var span=document.getElementsByTagName("span");
var count=0;
var timer;
var interval=3000;
var animated = false;
function move(offset){
animated = true;
var time = 1000;
var inteval = 10;
var speed = offset/(time/inteval);
var left=parseInt(imgs.style.left)+offset;
var amimate=function(){
if ( (speed > 0 && parseInt(imgs.style.left) < left) || (speed < 0 && parseInt(imgs.style.left) > left)) {
imgs.style.left = parseInt(imgs.style.left) + speed + 'px';
setTimeout(amimate, inteval);
}else{
imgs.style.left = left + 'px';
if(parseInt(left)>-1024){
imgs.style.left=-3072+"px";
}
if(parseInt(left)<-4096){
imgs.style.left=-1024 +"px";
}
animated = false;
}
}
amimate();
}
function showspan(){
for(i=0;i<span.length;i++){
if(span[i].className=='on')
span[i].className='';
}
span[count].className='on';
}
prev.onclick=function(){
if (animated) {
return;
}
move(1024);
if(count==0){
count=3;
}
else
count--;
showspan();
}
next.onclick=function(){
if (animated) {
return;
}
move(-1024);
if(count==3){
count=0;
}
else
count++;
showspan();
}
for (var i = 0; i < span.length; i++) {
span[i].id=i;
span[i].onclick=function(){
if(this.className=='on'){
return;
}
index=this.id;
var offset=-1024*(index-count);
move(offset);
count=index;
showspan();
}
}
function play() {
timer = setInterval(function () {
next.onclick();
}, interval);
}
function stop() {
clearInterval(timer);
}
contain.onmouseover = stop;
contain.onmouseout = play;
play();
}其中的anmiated，設定成flase這樣我們在判斷時如果是false便不執行函式，這樣我們在運動的時候就可以避免使用者一直點選箭頭
效果圖
這裡寫圖片描述
