标签: slideshow

如何通过4个小jpeg（128px x 128px）和Linux命令行图形工具将图像幻灯片显示为视频文件？我需要更改幻灯片的过渡方式：

• 淡入/淡出黑色
• 淡入下一张图像时向左/向右滑动

如果您感到好奇，我们计划制作可放入手机中的房地产列表视频。（我们已经拥有将Ogg Theora转换为专有移动格式的技术。）

我从一个教程中获取此代码,在javascript/jQuery中制作一个自动推进幻灯片,它在jsfiddle中运行得非常好.但是,当我将所有内容都带入Dreamweaver时,它似乎就停止了工作.一切都在那里,我已经链接了所有相关文件(.js和.css)以及jQuery库.出于某种原因,它根本不起作用.这是代码.

HTML

<div class="fadeIn">
            <img src="image1.png" height="500" width="800"/>
            <img src="image2.png" height="500" width="800"/>
            <img src="image3.png" height="500" width="800"/>
            <img src="image4.png" height="500" width="800"/>
        </div>

CSS

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

这是标题

<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="SlideShow.css">

当我更改幻灯片放映等图像源时,如何实现FadeIn和FadeOut图像.我的图像从本地和网络加载,其数量是可变的.谢谢

所以我有这个简单的幻灯片：

<div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>

当我像这样单击时，我设法使图像发生了变化：

<script language="javascript">
    var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];

    function changeImage() {
        document.getElementById("imgClickAndChange").src = imgs[0];
        imgs.push(imgs.shift())
    }
</script>

问题是当我按下右箭头（下一个）和左箭头（返回）时，我还希望图像发生变化。我怎样才能做到这一点？我试过添加一个“onkeypress”事件，但似乎没有任何效果。我做错了什么。我对 javascript 很陌生，所以如果你能帮助我，那就太好了。谢谢 ：）

我正在使用flexslider进行一些图像旋转,现在需要使用此幻灯片实现Popup Gallery,即,当用户点击滑块内的活动幻灯片时,想要在灯箱中显示为图库.

所以我尝试合并'magnificPopup',它有效,但问题是它抓住幻灯片的所有实例,即如果我在滑块中有2个图像,我将在弹出库中获得4个,即,magnificpopup获取所有实例包括'克隆',那么如何实现这个问题,有没有其他方法,或插件或回调函数,我可以使用？下面是我试过的代码,都是基本的实现

Flex Sldier:

$('.slideTwo').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: false,
    animationLoop: true,
    slideshow: false
});

MagnificPopup:

$('.popup-link').magnificPopup({
    type: 'image',
    gallery:{enabled:true}
});

HTML:

<div class="slideTwo" id="slideTwo">
    <ul class="slides">
        <li>
            <a class="popup-link" href="img/room1.jpg"><img src="img/room1.jpg" alt="">
                <span>East Wall</span>
            </a>
        </li>
        <li>
            <a class="popup-link"href="img/room21.jpg"><img src="img/room21.jpg" alt="">
                <span>West Wall</span>
            </a>
        </li>
    </ul>
</div>

我一直在尝试使用 nodejs + fluent-ffmpeg 从一系列图像创建幻灯片，但是它无法正常工作或始终如一。ffmpeg 偶尔会发出“错误：ffmpeg 以代码 1 退出：管道：0：处理输入时发现无效数据”，并且如果创建了最终视频 (mp4)，它似乎缺少图像/帧。

过程如下：将图像加载到内存中，使用 lwip 将其转换为相同尺寸，依次写入直通流，该流作为输入提供给 ffmpeg。

相关代码片段：

var lwip = require('lwip');
var ffmpeg = require('fluent-ffmpeg');
var stream = require('stream');
var imagesStream = new stream.PassThrough();

...

image.batch()
            .contain(options.video.width, options.video.height, 'lanczos')
            .toBuffer(options.frames.format, {quality: 100}, (err, buffer) => {
                if (err) {
                    throw ('error convering image to buffer. ' + err);
                }
                imagesStream.write(buffer, 'utf8');
                resolve();
            });

...

    ffmpeg(imagesStream)
        .inputOptions('-framerate 1/' + options.frames.secsPerImage)
        .input(path.join(AUDIO_ROOT, options.audio.track))
        .save(path.join(path.join(OUTPUT_FOLDER, `${options.video.output.prefix}${timestamp}.${options.video.output.format}`)))
        .size(`${options.video.width}x${options.video.height}`)
        .on('start', () => {
            console.log('creating the clip now...') …

我仍在学习 R，因此请该平台的专家帮助我。

我正在尝试在 Shiny 的面板中创建 .jpg 图像的幻灯片。当我在 RStudio 中运行时，下面的代码为我提供了 RStudio 绘图窗口中的幻灯片。

folder <- "D:/Photos/Foreign Trips/2014_07_08_USA_Irvine/JulyAugust/" 
file_list <- list.files(path=folder, pattern="*.jpg", full.names = TRUE)
for (j in 1:30) {
        myJPG <- stack(file_list[[j]])
        plotRGB(myJPG)
}

但是，当我尝试将相同的代码放入 server.R 并尝试通过 ui.R 调用时，我没有看到幻灯片或任何图像被显示。单击“照片幻灯片”选项卡时，出现空白页面。我尝试使用 renderUI、renderImage 和 renderPlot，但没有任何效果。

用户界面

tabPanel("Photo Slides",
plotOutput("trvImg")
),

服务器

output$trvImg <- renderPlot({
folder <- "D:/Photos/Foreign Trips/2014_07_08_USA_Irvine/JulyAugust/" 
file_list <- list.files(path=folder, pattern="*.jpg", full.names = TRUE)
for (j in 1:30) {
myJPG <- stack(file_list[[j]])
plotRGB(myJPG)
}

作为一名学习者，我确信我在某个地方出错了，因此寻求您的帮助。

谢谢

我正在尝试使用 Jupiter notebook 制作幻灯片，因此我可以在上面嵌入代码。

我按照reveal.js 创建了一个html 幻灯片。 https://www.youtube.com/watch?v=EOpcxy0RA1A

但最后，我没有得到从一张幻灯片切换到另一张幻灯片的箭头

google-chrome MySlide.slides.html 
firefox MySlide.slides.html 

我做了同样的事情，但我不知道为什么我没有得到带有箭头的幻灯片。我一次得到整个页面。

我做错了什么？如何获得带有箭头的演示文稿？我正在使用 ubuntu 18.04

所以我正在尝试构建一个动画背景图像,它将循环显示一系列图像.

我们的想法是,当您单击页面上的任何导航元素时,循环将暂停.

单击主页按钮时,循环将再次启动(从当前图像).

这在它的当前状态下工作,但是在重新触发它时循环不是自动的,而是你必须按下每个淡入淡出/滑动/任何东西的主页按钮.

脚本如下:

$(document).ready(function(){

    var imgArr = new Array(
        'img/slides/slide1.jpg',
        'img/slides/slide2.jpg',
        'img/slides/slide3.jpg');

    var preloadArr = new Array();
    var i;


    // Preload
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 1;
    var IntID = setInterval(startSlider, 4000);

    // Image Rotator

    function startSlider(){
        $('.mainbg').animate({opacity: 0}, 1200, "easeInOutExpo", function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src + ') no-repeat center center fixed');
            $(this).css({'background-size': 'cover' , '-webkit-background-size': 'cover' , '-moz-background-size': 'cover' , '-o-background-size': 'cover' ,});
            }).animate({opacity: 1}, 1200, "easeInOutExpo"); …

我有一个真正简单的jquery滑块,它非常适合我的使用.只是链接图像,没有控件,拇指,什么都没有,真的很简单!

当鼠标光标在它上面时,我试图让它成为stoo,但我无法做到.有人能帮我一下吗？

slider.js

function slideSwitch()
    {
        var $active = $('#slideshow a.active');
        if ( $active.length == 0 ) $active = $('#slideshow a:last');
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow a:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function()
        {
            $active.removeClass('active last-active');
        });
}
$(function()
{
    setInterval( "slideSwitch()", 10000 );
});

slider.css

#slideshow { height: 300px; position: relative; width: 960px; }
#slideshow a { left: 0; opacity: 0.0; position: absolute; top: 0; z-index: 8; }
#slideshow a.active { opacity: 1.0; z-index:10; …