如何使用materialize.css创建滑块

时间：2017-01-13 12:36:31

标签： javascript jquery css html5 materialize

我正在尝试使用materialize css为即将到来的活动创建一个网站。这就是我希望页面看起来的样子（不完全相同。图像用于表示）：

enter image description here

这是我与jsbin的链接





body {
  background: #0b1924;
}
/*Loading screen animation code begins*/

#load {
  position: absolute;
  width: 600px;
  height: 36px;
  left: 50%;
  top: 40%;
  margin-left: -300px;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
#load div {
  position: absolute;
  width: 20px;
  height: 36px;
  opacity: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  animation: move 2s linear infinite;
  -o-animation: move 2s linear infinite;
  -moz-animation: move 2s linear infinite;
  -webkit-animation: move 2s linear infinite;
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  color: #35C4F0;
}
#load div:nth-child(2) {
  animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
#load div:nth-child(3) {
  animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
#load div:nth-child(4) {
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
#load div:nth-child(5) {
  animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
#load div:nth-child(6) {
  animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
#load div:nth-child(7) {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  35% {
    left: 41%;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    left: 59%;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}
@-moz-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  35% {
    left: 41%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    left: 59%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}
@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  35% {
    left: 41%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    left: 59%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}
@-o-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  35% {
    left: 41%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    left: 59%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}
/*

Loading screen animation ends here....
*/

/*FAB code begins*/

.fixed-action-btn,
.toolbar {
  margin-top: 2%;
  margin-left: 2%;
  width: 100px;
  height: 100px;
  top: 23px;
  left: 23px;
}
.btn-large i {
  font-size: 2.5rem;
  margin-top: 20%;
}
.slider {
  position: relative;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Spark fest</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/materialize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</head>

<body>
  <div id="load">
    <div>g</div>
    <div>n</div>
    <div>i</div>
    <div>d</div>
    <div>a</div>
    <div>o</div>
    <div>L</div>
  </div>

  <div class="row hideBeforeLoad ">
    <div class="fixed-action-btn toolbar hideBeforeLoad col s12">
      <a class="btn-floating btn-large hideBeforeLoad" style="width: 100px; height:100px;">
        <i class="large material-icons hideBeforeLoad" title="Loading..">reorder</i>
      </a>
      <ul class="hideBeforeLoad">
        <li class="waves-effect waves-light hideBeforeLoad"><a href="#!"><i class="material-icons tooltipped" data-position="right" data-delay="50" data-tooltip="HOME">home</i></a>
        </li>
        <li class="waves-effect waves-light hideBeforeLoad"><a href="#!"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="EVENTS">event</i></a>
        </li>
        <li class="waves-effect waves-light hideBeforeLoad"><a href="#!"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="WHEN?/WHERE?">location_on</i></a>
        </li>
        <li class="waves-effect waves-light hideBeforeLoad"><a href="#!"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="CONTACT US">contacts</i></a>
        </li>
      </ul>
    </div>

  </div>
  <section>
    <div class="row">
      <div class="slider">
        <ul class="slides">
          <li>
            <img src="https://tctechcrunch2011.files.wordpress.com/2015/04/codecode.jpg">
            <!-- random image -->
            <div class="caption center-align">
              <h3>This is our big Tagline!</h3>
              <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/580/250/nature/2">
            <!-- random image -->
            <div class="caption left-align">
              <h3>Left Aligned Caption</h3>
              <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/580/250/nature/3">
            <!-- random image -->
            <div class="caption right-align">
              <h3>Right Aligned Caption</h3>
              <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/580/250/nature/4">
            <!-- random image -->
            <div class="caption center-align">
              <h3>This is our big Tagline!</h3>
              <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
            </div>
          </li>
        </ul>
      </div>


  </section>



  <script type="text/javascript">
    $(window).on('load', function() {
      $("#load").fadeOut("slow");;
    });
    $(window).on("pagebeforeload", function() {
      $(".hideBeforeLoad").hide();
    });
  </script>

</body>

</html>

以下是我在浏览器上运行时的输出结果：

Actual output

看起来隐藏了图片。有什么方法可以调整代码，使其看起来像预期的那样吗？

1 个答案:

答案 0 :(得分：1)

所有li元素都有0个不透明度。

.slider .slides li {
    opacity: 0;
    ...
}

更改并显示图像。

相关问题
最新问题