javascript - 如何使用 materialize.css 创建 slider

标签 javascript jquery css html materialize

我正在尝试使用 materialize css 为即将举行的事件制作一个网站。这是我希望页面的外观(不完全相同。图片仅供展示):

enter image description here

这是我的 jsbin 链接

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</div>
</div>

这是我在浏览器上运行时的输出:

Actual output

看起来图像被隐藏了。有什么方法可以调整代码以使其看起来符合预期吗？

最佳答案

所有 li 元素的不透明度均为 0。

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

更改它并显示图像。

关于javascript - 如何使用 materialize.css 创建 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41634808/

上一篇：javascript - 如何让文本显示在此 Bootstrap 轮播中的叠加层上方？

下一篇：css - JHipster 构建中不包含 webapp/content 下的文件夹

相关文章：

javascript - 将并排的 Rects 连接到一个大 Rect

javascript - angularjs 范围值不更新

javascript - jQuery ajax 函数未定义结果

javascript - 包含基于链接的信息的新页面

javascript - div 在鼠标移动时淡入，不淡出

javascript - CSS和JS，让div跟随滚动

javascript - 如何以样式缓存图像 url？

JavaScript - 只接受某些小数值

javascript - 尝试更新 JS 文件中的进度条

jquery - 迭代页面中的每个文本元素？

©2024 IT工具网  联系我们