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

(将轮播图用于首页。)
m (解决轮播图初始时倒退的问题。)
 
(One intermediate revision by the same user not shown)
Line 3: Line 3:
 
     let length = data.length;
 
     let length = data.length;
 
     for (let i = 0; i < length; i++) {
 
     for (let i = 0; i < length; i++) {
−
         $('#box_img ul').append('<li><img src="' + data[i].src + '">');
+
         $('#box_img ul').append('<li><a href="'+data[i].src+'" target="_blank"><img src="' + data[i].src + '"></a>');
−
         $('#word ul').append("<li><h4>" + data[i].title + "</h4><p>" + data[i].description + "</p></li>");
+
         $('#word ul').append("<li><h4>" + data[i].title + "</h4></li>");
 
     }
 
     }
 
     let active = 0;
 
     let active = 0;
Line 33: Line 33:
 
     };
 
     };
  
−
     setInterval(move, interval, true);
+
     let si = setInterval(move, interval, true);
 +
    $('#box').hover(function () {
 +
        clearInterval(si);
 +
    }, function () {
 +
        si = setInterval(move, interval, true);
 +
    });
 
}
 
}

Latest revision as of 17:30, 17 October 2018

function slideshow(data) { 

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

  • " + data[i].title + "

    • "); 
       }
   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, true);
   $('#box').hover(function () {
       clearInterval(si);
   }, function () {
       si = setInterval(move, interval, true);
   });
    }