将图像旋转木马添加到降价中

Question

我想在我的github readme.md文件中创建图像旋转木马。我看到Code HTML在Markdown中运行不佳，但我想知道是否可以在Markdown中进行轮播。我正在此处使用HTML代码

Answer 1

您可以使用Markdown做任何事情。您只需要一些代码。您可以在mkdocs.yml

中添加JavaScript代码

extra_javascript:
    - js/image-carousel.js 

这是一个非常简单的mkdocs旋转木马，它在页面中搜索所有元素，并用在旋转木马中使用相同的rect大小转动测序图像。

// $ cat docs/js/image-carousel.js 
var keepTime = 2000;
console.log("Carousel MKDocs");
function updateCarousel(img) {
  if (img.carouselRunning) {
    let outstyle = img.carousel[img.carouselIndex % img.carousel.length].style;
    outstyle.visibility = 'hidden';
    outstyle.opacity = 0;
    img.carouselIndex = (img.carouselIndex + 1) % img.carousel.length;
    let instyle = img.carousel[img.carouselIndex % img.carousel.length].style;
    instyle.visibility = 'visible';
    instyle.opacity = 1;
    instyle.position = 'absolute';
  }
  setTimeout(updateCarousel, keepTime, img);
}
function setCarouselEvents(img) {
  img.style.visibility = 'hidden';
  img.style.transition = 'opacity 1.3s, visibility 1.3s';
  img.style.position = 'absolute';
  img.addEventListener(
      'mouseover', function(e) { this.carousel[0].carouselRunning = false; });
  img.addEventListener(
      'mouseout', function(e) { this.carousel[0].carouselRunning = true; });
}
function setCarousel(img) {
  img.carouselRunning = true;
  setCarouselEvents(img);
  img.carouselIndex = 0;
  setTimeout(updateCarousel, 1, img);
}
// fist we need to ask DOM for all p > img tags
let imgs = document.querySelectorAll('P > IMG');
for (let i = 1; i < imgs.length; i++) {
  let h = imgs[i].naturalHeight;
  let w = imgs[i].naturalWidth;
  let pe = imgs[i].previousElementSibling;
  if (!pe) {
    continue;
  }
  if (pe.nodeName != "IMG") {
    continue;
  }
  let sh = pe.naturalHeight;
  let sw = pe.naturalWidth;
  if (sw != w || sh != h) {
    continue;
  }
  if (imgs[i].carousel) {
    continue;
  }
  if (!pe.carousel) {
    pe.carousel = [ pe ];
    setCarousel(pe);
  }
  pe.carousel.push(imgs[i]);
  imgs[i].carousel = pe.carousel;
  setCarouselEvents(imgs[i]);
  // set parent size
  pe.parentElement.style.minWidth = "calc(" + sw + "px + 2em)";
  pe.parentElement.style.minHeight = "calc(" + sh + "px + 2em)";
}

Answer 2

这个问题有点过时，但仍然相关，所以我想分享我（有点骇人听闻的）方法来将其作为将来的参考：

我使用ffmpeg创建带有crostfade的gif

ffmpeg 
-framerate 10 -loop 1 -t 5 -i 1.png 
-framerate 10 -loop 1 -t 5 -i 2.png 
-framerate 10 -loop 1 -t 5 -i 3.png 
-framerate 10 -loop 1 -t 5 -i 4.png 
-framerate 10 -loop 1 -t 5 -i 5.png 
-filter_complex 
"[1]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+4/TB[f0]; 
 [2]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+8/TB[f1]; 
 [3]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+12/TB[f2]; 
 [4]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+16/TB[f3]; 
 [0][f0]overlay[bg1];[bg1][f1]overlay[bg2];[bg2][f2]overlay[bg3];[bg3][f3]overlay,split[v0][v1]; 
 [v0]palettegen[p];[v1][p]paletteuse[v]" -map "[v]" out.gif

之后，我将在github上创建一个问题，"添加幻灯片"。在这里，我将添加GIF作为评论。现在，您可以简单地将创建的链接复制到github原始内容上传并将其粘贴到您的读数中。

现在，您的幻灯片中有一个幻灯片，而无需在仓库中添加任何图像或代码，而无需使用JavaScript。