标签: slideshow

我有一个 CSS + Javascripts 幻灯片，取自W3Schools 网站示例。

这是适合我的网络应用程序的代码（几乎相同）：

$(document).ready(function() {
  var slideIndex = 1;

  function showSlides(n) {
    var slides = $(".mySlides");
    var i;

    if (n > slides.length) {
      slideIndex = 1;
    }

    if (n < 1) {
      slideIndex = slides.length;
    }

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex - 1].style.display = "block";
  }

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  showSlides(slideIndex);

  $(".prev").click(function() {
    plusSlides(-1);
  });

  $(".next").click(function() {
    plusSlides(1);
  });

});

@-webkit-keyframes fade …

我正在制作嵌套的光滑滑块。我希望单击任何第一个滑块元素隐藏第一个滑块并显示第二个滑块（在第一个滑块的子块上创建）。我遇到的问题是幻灯片在我的预览块之外开始（参见图片）

1. https://i.stack.imgur.com/nBXLD.png（第一张幻灯片）
2. https://i.stack.imgur.com/vIJNG.png（第二张幻灯片，单击第一张幻灯片元素）
3. 

这是我的代码：

html:

<div class="slides-preview">
<button type="button" class="arrow-prev></button>
<div class="slide1">
   <div class="slide1-elm">
      <div class="header">Name slide 1 element 1</div>
      <div class="slide2">
         <span class="close">close</span>
         <div class="option"></div>
         <div class="option"></div>
         <div class="option"></div>
      </div>
   </div>
   <div class="slide1-elm">
      <div class="header">Name slide 1 element 2</div>
      <div class="slide2">
         <span class="close">close</span>
         <div class="option"></div>
         <div class="option"></div>
         <div class="option"></div>
      </div>
   </div>
   <div class="slide1-elm">
      <div class="header">Name slide 1 element 3</div>
      <div class="slide2">
         <span class="close">close</span>
         <div class="option"></div>
         <div class="option"></div>
         <div class="option"></div>
      </div>
   </div>
</div>
<button type="button" class="arrow-next></button>
</div>

CSS： …

Jupyter Notebook我们可以创建幻灯片，如此处所述。在这里您可以看到一个通过 Anaconda-navigator 创建 Jupyter 笔记本幻灯片的可重现示例：

在终端中运行此命令时：

jupyter nbconvert slides_test.ipynb --to slides --post serve

它将在您的浏览器中输出：

对于代码单元输出：

这非常好，我想使用它，但是在VScode.

在 Anaconda 导航器的 Jupyter Notebook 中，我们可以通过单击标题栏中的View-> Cell Toolbar->来创建幻灯片。Slideshow不幸的是，这在 VScode 中是不可能的。所以我想知道是否有人知道如何在 VScode 中创建 Jupyter Notebook 幻灯片？

我用'li'标签和jquery做了一个幻灯片放映.

整个'ul'分别向Next或Prev按钮移动到左侧或右侧,其宽度等于放在一起的所有幻灯片的总宽度,即每个700px.并且只允许1个幻灯片在宽度等于700px的视口中显示.但是,当我点击下一个节目时,即使没有更多幻灯片也会继续播放.

解决方案是在最后一张幻灯片显示在视口中时隐藏"下一步"按钮.我怎么做？

或者也许欢迎另一种解决方案......

这是我的简化代码:

var slideList = $('#slideWindow ul')

$('#next').click(function(e){

    slideList.animate({ 'left': '-=700px' });

    if( $('li:last').next() === 0 ){

        $(this).hide();

    } else {

        $(this).show();

    }

    return false;

});

我正在使用slidy.js循环遍历div中的几个图像.

我的问题是:我如何使用jQuery包裹<a href="http://www.google.com">和</a>周围的每个图像在div(ID为"imgFade")？

提前致谢!
亚当

嘿,我想知道在任何人都知道的测量时间单位？我认为这将是所有JavaScript的标准,所以我认为这是您需要的所有信息.

非常感谢提前!

$('.slider-text-image').flexslider({
        animation: "fade",
        slideshowSpeed: 4000,
        animationDuration: 600,
        controlNav: true,
        keyboardNav: true,
        directionNav: false,
        pauseOnHover: true,
        pauseOnAction: true  

});

我有一个jQuery幻灯片设置,我需要将链接从幻灯片标题锚定到页面下方的div并使用jQuery平滑滚动.

我会使用带有标签的常用锚码,但我的幻灯片已经使用主题标签为每张幻灯片创建一个固定链接URL.

示例:slideshow.html#slide-1,slideshow.html#slide-2

因此,如果我将一个锚标记用于div(一个href ="#lower-div"),它将替换永久链接的哈希标记.

有没有办法平滑滚动到锚点而不在href中使用哈希标记？

所以我基本上使用下面的基本交叉渐变创建幻灯片是我正在使用的脚本

脚本:

  $(document).ready(function(){
        var slide = function(){
                                var active = $('.active');
                                var next = (active.next().length > 0) ? active.next() : $('#slide:first');
                                next.css('z-index',2);
                                active.fadeOut(1000,function(){// fade out the active image
                                                                active.css('z-index',1).show().removeClass('active');
                                                                next.css('z-index',3).addClass('active');
                                });
                              }
        setInterval(slide,2000)
  });

正如您所看到的,上面的脚本每两秒交叉淡出一个图像列表.现在我想做的是clearInterval(Interval id)当用户点击previous image按钮或按钮时停止幻灯片放映(即使用),next image但它似乎工作.我已经尝试过w3schools.com等的示例但无济于事

更新

完整的脚本,如果有任何疑问

  $(document).ready(function(){
        var slide = function(){
                                var active = $('.active');
                                var next = (active.next().length > 0) ? active.next() : $('#slide:first');
                                next.css('z-index',2);
                                active.fadeOut(1000,function(){// fade out the active image
                                                                active.css('z-index',1).show().removeClass('active');
                                                                next.css('z-index',3).addClass('active');
                                });
                              }
        setInterval(slide,2000)
  });

  //------------on …

所以,我想为我的网站使用CSS和HTML制作文字幻灯片.(我也可以使用Java)我想要一个特定的类型....就像在它的标志下用于本网站(http://kickammender.com/)的那种.

如果有人能够找出要为此编写的代码,那就太棒了.

谁可以告诉我的步骤将Google共享幻灯片就像这对杰基尔我的博客？我是否必须将每个幻灯片转换为markdown格式，或者先转换为pdf，然后转换为markdown？

没头绪 请帮忙