Template:DLUT China B/js/slideshow.js

$(document).ready(function () {

   let interval = 3000;
   let slideshow = [
       {
           "src": "",
           "title": "DLUT China B Logo",
           "description": "DLUT China B Logo",
           "link": "#"
       },
       {
           "src": "",
           "title": "Laboratory",
           "description": "Laboratory.",
           "link": "#"
       },
       {
           "src": "",
           "title": "Clean Bench",
           "description": "Clean Bench.",
           "link": "#"
       }
   ];
   let length = slideshow.length;
   for (let i = 0; i < length; i++) {

$('#box_img ul').append('

<a href="' + slideshow[i].link + '"><img src="' + slideshow[i].src + '"></a>'); $('#word ul').append("

" + slideshow[i].title + "

" + slideshow[i].description + "

");

   }
   let active = 0;

   $('#box_img ul li').eq(0).show();
   $('#word ul li').eq(0).show();

   function move(forward) {
       if (forward === true) {
           active++;
           if (active === length)
               active = 0;
       }
       else {
           active--;
           if (active === -1)
               active = length - 1;
       }
       $('#box_img ul li').eq(active).fadeIn(300).siblings().fadeOut(300);
       $('#word ul li').eq(active).fadeIn(300).siblings().fadeOut(300);
   }

   document.getElementById('forward').onclick = function () {
       move(true);
   };
   document.getElementById('backward').onclick = function () {
       move(false);
   };

   let si = setInterval(move, interval);

   $('#box').hover(function () {
       clearInterval(si);
   }, function () {
       si = setInterval(move, interval, true);
   });

});