Question

我正在尝试创建一个简单的全屏幻灯片，我知道你可以获得插件，但我正在尝试学习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/

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

Answer 1

使用settimeout函数更改类：

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

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

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

您也可以使用JQuery Cycle：

JQuery Cycle

使用jquery创建全屏幻灯片

1 个答案: