在背景图像的外观上消防JQuery代码?

时间:2013-02-01 17:35:56

标签: jquery

    <script type="text/javascript">

            jQuery(function ($) {

                $.supersized({

                    // Functionality
                    slide_interval: 5000,       // Length between transitions
                    transition: 1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed: 700,      // Speed of transition

                    // Components                           
                    slide_links: 'blank',   // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    slides: [           // Slideshow Images
                                                        { image: 'http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg', url: 'http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg', url: 'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg' },
                                                        { image: 'http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg', url: 'http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg', url: 'http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg', url: 'http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg', url: 'http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg' },
                                                        { image: 'http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg', url: 'http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg', url: 'http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg', url: 'http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg' }
                    ]

                });
            });

        </script>

<script>

    $(document).ready(function () {
        function loop(){
      $("#p1").delay("1000").fadeIn("slow");
      $("#p2").delay("1000").fadeIn("slow");
      $("#p1").delay("3000").fadeOut("slow");
      $("#p2").delay("3000").fadeOut("slow");
      $("#p3").delay("6000").fadeIn("slow");
      $("#p3").delay("3000").fadeOut("slow");
      $("#p4").delay("12000").fadeIn("slow");
      $("#p4").delay("3000").fadeOut("slow");
      $("#p5").delay("18000").fadeIn("slow");
      $("#p5").delay("3000").fadeOut("slow");
      $("#p6").delay("24000").fadeIn("slow");
      $("#p6").delay("3000").fadeOut("slow");
      $("#p7").delay("30000").fadeIn("slow");
      $("#p7").delay("3000").fadeOut("slow");
      $("#p8").delay("35000").fadeIn("slow");
      $("#p8").delay("3000").fadeOut("slow");
      $("#p9").delay("41000").fadeIn("slow");
      $("#p9").delay("3000").fadeOut("slow");
      $("#p10").delay("46000").fadeIn("slow");
      $("#p10").delay("4084").fadeOut("slow",loop);
        }
        loop();
    });


</script>

好的伙计,这就是问题所在。我有一个完整的背景幻灯片,我想与屏幕上显示的一些文本同步。正如您所看到的,此文本由“&#39; p&#39; fadeIns。我的问题是,我目前确保文本始终出现在正确的背景幻灯片上的方法只是延迟最后一张图片,因为它不同步,所以不太理想。我很感激有人告诉我一个更好的方法可以做到:DI认为我们可以告诉fadeIn功能在第一个背景图像出现在屏幕上时立即激活,但不确定如何做到这一点。

1 个答案:

答案 0 :(得分:0)

理想情况下,您应该使用代码淡化主题函数theme.beforeAnimation()中的文本,如果您使用默认主题(快门),请检查文件supersized.shutter.js并搜索'beforeAnimation:function(direction) ){”。

另一种(丑陋的)方式可能是:

  • 将幻灯片设置为关闭
  • 使用API​​通过api.nextslide()
  • 手动将幻灯片与所需文字进行转换

修改 首先确保您使用的是未缩小的模板版本:在HTML的头部,您会发现:

<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

替换为:

<script type="text/javascript" src="theme/supersized.shutter.js"></script>

然后编辑supersized.shutter.js文件并在beforeAnimation()函数中添加以下行(第239行)

$('[id^="p"]').fadeOut(); 
$('#p' + (vars.current_slide + 1)).delay(500).fadeIn("slow"); 

因为我不知道你的html是如何隐藏所有id为'p'的元素,所以如果你改进这个选择器$('[id ^ =“p”]')则更好.fadeOut ();. 就是这样。

希望它有所帮助。