SP_Glass/goto.js

// var next=document.getElementsByClassName('nextPage');
var next = document.getElementById('nextPage');
var prev = document.getElementById('prevPage');

var items = document.getElementsByClassName('bg-item');
var items2 = document.getElementsByClassName('bg-item2');

var index = 0;

// console.log(items);

function btnNext() {
    index++;

    if (index > 3) index = 3;
    console.log(index);

    ShowItems();
    ShowItems2();
};

function btnPrev() {
    index--;
    if (index < 0) index = 0;
    console.log(index);

    ShowItems();
    ShowItems2();
    
};

next.onclick = btnNext;

prev.onclick = btnPrev;

console.log(items)

function ShowItems() {
    // 迴圈執行，將每張項目的類別bg-active移除
    for (var i = 0; i<items.length; i++) {
        items[i].classList.remove("bg-active");    
    }
    // 將要顯示的項目添加bg-active類別
    items[index].classList.add("bg-active");
    // $('.bg-item').fadeIn();

};

function ShowItems2() {
    // 迴圈執行，將每張項目的類別bg-active移除
    for (var i = 0; i<items.length; i++) {
        items2[i].classList.remove("bg-active");    
    }
    // 將要顯示的項目添加bg-active類別
    items2[index].classList.add("bg-active");
    // $('.bg-item').fadeIn();

};

// var duration =document.getElementById('bg-itembox').getAttribute('data-slider-duration');

// console.log(duration);

// setInterval(btnNext,duration);