标签: slideshow

我想增大我的一张 Marp 幻灯片上代码块的字体。

如何设置单个代码块的样式而不影响周围的文本？

我有一位客户已经为他的投资组合网站制作了他每天花了365天拍摄一次照片的"视觉日记".他希望我把这些放在一起延时效果.我想过使用Flash但最终选择了JavaScript.

需要做的是:图像循环非常快,没有过渡或任何东西,只有图像 - 图像 - 图像等.大约30/fps或类似的东西.单击闪烁的图像时,它会停止在您选择的图像上,因此用户可以查看.再次单击时,幻灯片将再次开始播放.

我的问题是我是一个PHP/XHTML/CSS的家伙,他对JavaScript并不是最模糊的.我可以愉快地将它集成到任何页面中,但它只是编写令我烦恼的JavaScript.

在他的主页上,我有这个代码用于显示一个基本的幻灯片 - 具有过渡效果等.它在HTML中,但你可以理解我确定的代码:

<!-- Code for slideshow -->
<!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = …

好的,这是我第一次使用Nivo滑块.我的滑块卡在4号照片上,根本没有滑动.我几乎完全迷失了如何调用底部的子弹导航.这是我的代码;

HEAD中的样式表:

<link href="nivo-slider.css" rel="stylesheet" type="text/css" />

Nivo Slider div页面:

<div id="nivo_slider">
     <div id="slider" class="nivoSlider">
           <img src="images/slideshow/1.jpg" width="791" height="254" />
           <img src="images/slideshow/5.jpg" width="791" height="254" />
           <img src="images/slideshow/3.jpg" width="791" height="254" />
           <img src="images/slideshow/2.jpg" width="791" height="254" />
           <img src="images/slideshow/4.jpg" width="791" height="254" />
     </div>
</div>

页面底部的JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index) …

我有一个包含许多这样的元素的html文档

<article class=slide id=s4>
<h1></h1>

<p></p>
</article>

我想要做的就是当链接成为www.mylink.com#s4那时只有id=s4要出现的文章.而另一个消失了.我知道display:none;属性值,但我不知道如何在没有javascript的情况下切换这个值.

提前致谢...

我们正在使用Galleria库(http://galleria.io/)从一组用户选择的图像中动态生成幻灯片.用户还可以选择一些选项,如高度,宽度,转换速度,显示/隐藏缩略图轮播等.这些设置适用于Galleria选项.

现在,当用户选择隐藏轮播时,我设置相关选项,使旋转木马中的缩略图消失.但是,容器div(使用css类galleria-thumbnails-container)仍占用一些空白.我尝试改变这个类的几个css属性以及没有运气的galleria容器.

我尝试过的事情:

• 选择具有"galleria-thumbnails-container"类的div后,将高度更改为0.未观察到任何变化.
• 在使用"galleria-thumbnails-container"类选择div后,将显示更改为none.没有观察到变化.
• 选择带有"galleria-container notouch"等级的div后,将高度降低70 px.这降低了幻灯片中主图像的高度.

我已经通过了Galleria doc,但他们似乎没有办法解决这个问题.所以这是一个css hack.有任何想法吗？

谢谢.

我想让nivoSlider在这个网站http://fritech.co.uk/上工作,它有三张图片

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

然而nivoSlider只显示其中一个,总是最顶层的.我不确定这里出了什么问题.任何帮助,将不胜感激.

slides.js几乎没有文档.我已将其设置为自动更改幻灯片,并隐藏prev/next按钮.有没有办法隐藏"停止/播放"按钮？

我使用jQuery创建了一个图像幻灯片,其中5个图像在25秒的间隔内一个接一个地出现.每个图像在淡出之前保持5秒,然后下一个图像淡入.
幻灯片显示正常但我希望它永远循环, 即在最后一个图像淡出后,它应该从第一个图像重新开始动画.
我试过用setInterval但不能成功.这是我编写的幻灯片的工作示例:

的jsfiddle

这是完整的代码:

HTML:

<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />

使用Javascript:

$(document).ready(function(){
    $("#img2,#img3,#img4,#img5").hide();
    setTimeout(function(){
        $("#img1").fadeOut("slow", function () {});
    }, 5000);
    setTimeout(function(){
        $("#img2").fadeIn("slow", …

我正在尝试使旋转木马类似于以下内容：-http : //flexslider.woothemes.com/carousel-min-max.html

基本上，我只希望它一次前进一两个项目，而不是每次幻灯片放映时都替换全部项目。

我一直在玩最小和最大范围，但是似乎给出了不可预测的结果，我不确定那正是我真正需要的：

$('#photos-ylnm').flexslider({
    animation: "slide",
    itemWidth: 100,
    minItems: 10,
    maxItems: 12,
    slideshow: 1,
    animationSpeed: 350,
    slideshowSpeed: 1000
});

谁能看到我在做什么错？使用FlexSlider可以实现吗？

我最近从https://github.com/zvonicek/ImageSlideshow下载了一个图像滑块

我以前从未使用它.有人可以告诉我如何使用它吗？我是否必须以某种方式将其链接到imageView或其他内容？任何帮助将不胜感激.我没有在网上找到任何外行教程.

谢谢