使用jquery创建全屏幻灯片

时间:2013-12-03 10:57:55

标签: jquery slideshow fullscreen

我正在尝试创建一个简单的全屏幻灯片,我知道你可以获得插件,但我正在尝试学习jquery,我想从头开始制作它。

我希望图片位于style.css。

这是我非常简单的HTML代码:

<div id="page-wrapper">
  <div class="menu-wrapper">
    <div class="menu-logo"></div>
  </div><!-- /.menu-wrapper -->

  <div class="main-view-wrapper slide">
    <div class="carousel-wrapper">
    </div><!-- /.carousel -->
  </div><!-- /.main-view-wrapper -->
</div><!-- /#page-wrapper -->

这是当前的css代码:

* {
margin:0;
padding:0;
}
html,body {
height:100%;
width:100%;
}
#page-wrapper {
position: absolute;
width: 100%;
height: 100%;
} 
.main-view-wrapper {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
.carousel-wrapper {
width:100%;
height:100%;
background: url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/10/G-MerryXmasScienceLrg.gif) no-repeat center center; 
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

这是当前的小提琴: http://jsfiddle.net/2wu5H/3/

我还没有任何查询,因为我不知道从哪里开始

1 个答案:

答案 0 :(得分:0)

使用settimeout函数更改类:

setTimeout(function() {
      // Do something after 5 seconds
}, 5000);

了解更多内容请阅读:Basic setTimeout() Example

但更好的方法是将图像定义到html页面

您也可以使用JQuery Cycle

JQuery Cycle