Difference between revisions of "Template:DLUT China B/js/slideshow.js"

(初次上传)
 
(将轮播图用于首页。)
Line 1: Line 1:
−
$(document).ready(function () {
+
function slideshow(data) {
 
     let interval = 3000;
 
     let interval = 3000;
−
    let slideshow = [
+
     let length = data.length;
−
        {
+
−
            "src": "https://static.igem.org/mediawiki/2018/2/29/T--DLUT_China_B--logo.png",
+
−
            "title": "DLUT China B Logo",
+
−
            "description": "DLUT China B Logo",
+
−
            "link": "#"
+
−
        },
+
−
        {
+
−
            "src": "https://static.igem.org/mediawiki/2018/9/96/T--DLUT_China_B--laboratory.jpg",
+
−
            "title": "Laboratory",
+
−
            "description": "Laboratory.",
+
−
            "link": "#"
+
−
        },
+
−
        {
+
−
            "src": "https://static.igem.org/mediawiki/2018/b/b6/T--DLUT_China_B--Clean_Bench.jpg",
+
−
            "title": "Clean Bench",
+
−
            "description": "Clean Bench.",
+
−
            "link": "#"
+
−
        }
+
−
    ];
+
−
     let length = slideshow.length;
+
 
     for (let i = 0; i < length; i++) {
 
     for (let i = 0; i < length; i++) {
−
         $('#box_img ul').append('<li><a href="' + slideshow[i].link + '"><img src="' + slideshow[i].src + '"></a>');
+
         $('#box_img ul').append('<li><img src="' + data[i].src + '">');
−
         $('#word ul').append("<li><h4>" + slideshow[i].title + "</h4><p>" + slideshow[i].description + "</p></li>");
+
         $('#word ul').append("<li><h4>" + data[i].title + "</h4><p>" + data[i].description + "</p></li>");
 
     }
 
     }
 
     let active = 0;
 
     let active = 0;
Line 53: Line 33:
 
     };
 
     };
  
−
     let si = setInterval(move, interval);
+
     setInterval(move, interval, true);
−
 
+
}
−
    $('#box').hover(function () {
+
−
        clearInterval(si);
+
−
    }, function () {
+
−
        si = setInterval(move, interval, true);
+
−
    });
+
−
});
+

Revision as of 06:03, 2 October 2018

function slideshow(data) { 

   let interval = 3000;
   let length = data.length;
   for (let i = 0; i < length; i++) {
$('#box_img ul').append('
  • <img src="' + data[i].src + '">'); $('#word ul').append("

  • " + data[i].title + "

    " + data[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);
   };

       setInterval(move, interval, true);
    }