标签: slideshow

我正在尝试将幻灯片添加到我的某个网站.整个页面都放在一个HTML表格中(我讨厌它并且没有选择).我想将幻灯片放在那个特殊的列中.这是我的CSS看起来像:

#slideshow {
position:relative;
}

#slideshow IMG {
position:absolute;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

这是我的JQuery函数来更改图像:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

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

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

$(function() …

我试图获得一个jquery幻灯片来显示来自flickr,淡入淡出和滚动的图像.一切正常,除了我真的需要延迟加载图像(只需按需加载图像).

我目前正在使用jquery.cross-slide(http://tobia.github.com/CrossSlide/),但不幸的是,tobia不再使用该插件,也不想回答问题.

我找到了一个jquery.cycle的例子,其中应用了图像延迟加载(请参阅http://malsup.com/jquery/cycle/add3.html)是否有任何机会将此功能侵入交叉幻灯片的来源或者是由于插件的架构,这是不可能的？请参阅此处的代码:https://github.com/tobia/CrossSlide/blob/master/jquery.cross-slide.js#L131

我使用JQuery制作了一个幻灯片,目前只是append()用来添加一个<img>先前定义的容器.幻灯片显示自动旋转,在最终幻灯片后返回开始并无限延续.

目前,我根本不删除容器中的上一个图像.我没有注意到性能或内存填充方面的任何变化 - 如果我继续添加元素而不删除旧元素,我在Flash中习惯的行为.

是否有必要删除旧图像,或者这些图像永远不会导致性能问题？

$(document).ready(function(e) {

$('span#pijlr').click(function(e) {
    var slide = 500;
    var variable = $('#gallcont').css('left');
    var urechts = "-1000px";
    if(variable > urechts) {
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear');
    }
});

$('span#pijll').click(function(e) { 
    var slide = 500;
    var variable = $('#gallcont').css('left');
    var ulinks = "0px";
    if(variable < ulinks) {
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear');
    }   
}); 




});

这个代码我写的一个简单的幻灯片库我.除非我快速单击箭头按钮,否则一切正常.它将超出我设置的值(urechts和ulinks).

我尝试在.animate之前加上'stop()',但它没有帮助.希望你们能就如何解决这个问题给我一些建议.提前致谢!

背景/一般问题

我正在尝试修复一个朋友的网站,其中他添加的两个jQuery插件并不好玩.基本上,一个(基础 -网格布局与突片)是不打与第二(漂亮RoyalSlider -因为后者需要"看到"滑块材料而前者兽皮非活动标签的图像的滑块).有问题的页面有三个选项卡,每个选项卡上都有一个RoyalSliders.

原始代码在主页面上的某些jQuery中立即初始化了三个选项卡中每个选项卡的滑块.我一直试图通过仅初始化活动选项卡来修复它,然后,当单击选项卡时,插入代码以删除上一个滑块实例并为新选项卡创建一个新实例.

具体问题

在 $(currentLocation).royalSlider('destroy') 我添加的行没有做任何事情,我想不出我做错了什么. 眼下,滑块正确初始化的第一次,但是当我回去的任何选项卡,第二个滑块出现的第一个内部的,让我觉得删除功能不能正常工作; 它的大小较小,动画与滑块应该设置的不同(反弹可能？).这个数字永远不会超过两个.

码

以下是我正在处理的代码片段.我只是为开发人员提供了一些小部件(虽然很容易检查源代码).首先是一些RoyalSlider.js的,只是为了演示的结构和destroy方法(我并没有改变它在所有,这是一个非常标准的jQuery UI的插件格式):

RoyalSlider.js:

(function($) {
     function RoyalSlider(element, options){ /* Make a slideshow, basically */ }
     RoyalSlider.prototype = {
          ... /* methods */
          destroy:function(){
               this._stopSlideshow();
               this._dragContainer.unbind(this._downEvent);
               $(document).unbind(this._moveEvent).unbind(this._upEvent);
               $(window).unbind(this._resizeEvent);
               if(this.settings.keyboardNavEnabled) {
                    $(document).unbind("keydown.rs");
               }
               this.slider.remove();

               delete this.slider;
          }
          ... /* _internal methods; all above are defined */
     }; /* RoyalSlider.prototype end */

     $.fn.royalSlider = function(options) { /* basically return a new RoyalSlider */ };
     $.fn.royalSlider.defaults = { /* whole …

情况:

我用我的幻灯片Slider Revolution插件.
我需要为显示的图像设置不同的时间(持续时间).例如,我需要显示第一个图像仅2秒,而第二个图像需要显示7秒.

问题:

如何设置上一个项目的时间？可能吗？

代码:

在初始化插件的js函数中,有以下设置: delay:9000,并且更改它,可以设置持续时间,但会考虑所有项目.

这是js函数:

 initRevolutionSlider: function () {
        var tpj=jQuery;

        tpj(document).ready(function() {

            if (tpj.fn.cssOriginal!=undefined)
                tpj.fn.css = tpj.fn.cssOriginal;

                var api = tpj('.fullwidthbanner').revolution(
                    {
                        delay:9000,
                        startwidth:960,
                        startheight:250,

                        onHoverStop:"off",                      // Stop Banner Timet at Hover on Slide on/off

                        thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
                        thumbHeight:50,
                        thumbAmount:3,

                        hideThumbs:1,
                        navigationType:"bullet",                // bullet, thumb, none
                        navigationArrows:"solo",                // nexttobullets, solo (old name verticalcentered), none

                        navigationStyle:"round-old",            // round,square,navbar,round-old,square-old,navbar-old, or any from …

我制作了一个jquery幻灯片,这里是代码:

HTML

<div id="slideshow">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div id="previous">previous</div>

<div id="next">Next</div>

CSS

#slideshow {
    width: 700px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#slideshow img {
    position: absolute; 
}

jQuery的

$(document).ready(function() {
    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow');
    });

    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    });
});

"下一步"按钮有效,但当我点击"上一个"时,图像消失了!谁能帮我？

这是 小提琴.

我正在研究开源项目，该项目已上传到GitHub页面。我正在GitHub上编写其Wiki页面。我想链接上传到slideshare.net的，与此开源项目相关的演示幻灯片。

您能给我建议吗-如何将slideshare.net上的演示文稿幻灯片与GitHub Wiki页面链接？我想在GitHub Wiki页面上显示PPT的第一张幻灯片（包括标题，日期，作者信息）。

我愿意将演示文稿幻灯片移动到slideshare.net以外的其他网站上。

所以我决定使用一个简单的1行jquery内容滑块,而不是选择膨胀的插件.我正在使用animated.css进行文本淡入,除了jquery用于淡入/淡出幻灯片.

HTML:

<section id="student-blocks">
    <div>
        <h2 class="animated fadeUp">News Item #1</h2>
        <p "animated fadeIn">lorem</p>
    </div>
    <div>
        <h2 class="animated fadeUp">News Item #2</h2>
        <p "animated fadeIn">lorem</p>
    </div>
    <div>
        <h2 class="animated fadeUp">News Item #3</h2>
        <p "animated fadeIn">lorem</p>
    </div>
</section>

JQuery的:

$(function ()
{

    $("#student-blocks > div:gt(0)").hide();

    setInterval(function ()
    {
        $('#student-blocks > div:first')
        .hide()
        .next()
        .fadeIn()
        .end()
        .appendTo('#student-blocks');
    }, 4000);
});

网页寄给了这里:http://cloud69.comoj.com/pages/

问题

此幻灯片显示我的CPU使用率高达15%至20%.我尝试收集CPU配置文件,并定期看到尖峰(可能是幻灯片正在变化).

为什么CPU使用率如此之高？我该如何做得更好？

我想在materialcss视差中嵌入一个materializecss滑块.可以这样做吗？

我可以让每件作品都很好,但是当我把它们筑巢时,我只会得到带有字幕的灰色区域.

这是我的代码

<div class="parallax-container">
  
<div class="parallax">
      	
    <div class="slider">
        <ul class="slides">
      			<li>
        			<img src="images/new-york-city.jpg">
        			<div class="caption center-align brown-text text-darken-2">
         		 		<h3>This is our big Tagline!</h3>
          				<h5 class="light grey-text text-darken-2">Here's our small slogan.</h5>
        			</div>
      			</li>
      			
      			<li>
        			<img src="images/coffee.jpg">
        			<div class="caption center-align blue-grey-text text-darken-4">
          				<h3>This is our big Tagline!</h3>
          				<h5 class="light blue-grey-text text-darken-4">Here's our small slogan.</h5>
        			</div>
      			</li>    		
        </ul><!-- /slides -->
  	</div><!-- /slider -->
      
</div><!-- /parallax -->
</div><!-- /parallax-container -->

谢谢