Question

我想在我的GitHub README.md文件中创建图像轮播。我看到代码HTML在markdown中不能很好地工作，但我想知道是否可以在markdown中进行轮播。我正在使用来自here

的图片滑块的HTML代码

Answer 1

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

中添加JavaScript代码

extra_javascript:
    - js/image-carousel.js

这是一个非常简单的mkdocs轮播，它可以搜索页面中的所有元素，并在轮播中将具有相同矩形大小的已排序图像转换为

。

// $ 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)";
}

在降价中添加图像轮播

1 个答案: