javascript - 使用 JQuery 和 CSS 的 3D 轮播 - 无法正确渲染

标签 javascript jquery html css

我正在尝试使用 JQuery 和 CSS 实现 CD 轮播，并且我一直在浏览 StackOverflow 寻找一些想法。我遇到了this question 。我一直在尝试在自己的机器上实现想法 2 的代码，但它似乎不起作用。

这是所有代码:

/* Create an array to hold the different image positions */
var itemPositions = [];
var numberOfItems = $('#scroller .item').length;

/* Assign each array element a CSS class based on its initial position */
function assignPositions() {
  for (var i = 0; i < numberOfItems; i++) {
    if (i === 0) {
      itemPositions[i] = 'left-hidden';
    } else if (i === 1) {
      itemPositions[i] = 'left';
    } else if (i === 2) {
      itemPositions[i] = 'middle';
    } else if (i === 3) {
      itemPositions[i] = 'right';
    } else {
      itemPositions[i] = 'right-hidden';
    }
  }
  /* Add each class to the corresponding element */
  $('#scroller .item').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* To scroll, we shift the array values by one place and reapply the classes to the images */
function scroll(direction) {
  if (direction === 'prev') {
    itemPositions.push(itemPositions.shift());
  } else if (direction === 'next') {
    itemPositions.unshift(itemPositions.pop());
  }
  $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* Do all this when the DOMs ready */
$(document).ready(function() {

    console.log("DOM ready")

  assignPositions();
  var autoScroll = window.setInterval("scroll('next')", 4000);

  /* Hover behaviours */
  $('#scroller').hover(function() {
    window.clearInterval(autoScroll);
    $('.nav').stop(true, true).fadeIn(200);
  }, function() {
    autoScroll = window.setInterval("scroll('next')", 4000);
    $('.nav').stop(true, true).fadeOut(200);
  });

  /* Click behaviours */
  $('.prev').click(function() {
    scroll('prev');
  });
  $('.next').click(function() {
    scroll('next');
  });

});
html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);
}

.warning {
  margin: 10px auto 0;
  width: 500px;
  text-align: center;
  font-size: 20px;
}

#scroller {
  width: 500px;
  height: 200px;
  margin: 0 auto;
  padding: 50px 0;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -o-perspective: 500px;
}

#scroller .item {
  width: 500px;
  display: block;
  position: absolute;
  border-radius: 10px;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}
/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */

#scroller .item:before {
  border-radius: 10px;
  width: 500px;
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

#scroller .item img {
  display: block;
  border-radius: 10px;
}

#scroller .left {
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}

#scroller .middle {
  z-index: 1;
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}

#scroller .right {
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}

#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}

#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}

.nav {
  position: absolute;
  width: 500px;
  height: 30px;
  margin: 170px 0 0;
  z-index: 2;
  display: none;
}
.prev,
.next {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 15px;
  color: #E4E4E4;
  bottom: 15px;
  left: 15px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.next {
  left: inherit;
  right: 15px;
}

.prev:hover,
.next:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}
<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="test.js"></script>
        <link href="test.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="scroller">
          <div class="nav">
            <a class="prev">&laquo;</a>
            <a class="next">&raquo;</a>
          </div>
          <a class="item" href="#">
            <img src="http://i.imgur.com/5Mk3EfW.jpg" />
          </a>
          <a class="item" href="#">
            <img src="http://i.imgur.com/79aU67L.jpg" />
          </a>
          <a class="item" href="#">
            <img src="http://i.imgur.com/x3wSoFU.jpg" />
          </a>
          <a class="item" href="#">
            <img src="http://i.imgur.com/27fTqbA.jpg" />
          </a>
          <a class="item" href="#">
            <img src="http://i.imgur.com/RjdFV6n.jpg" />
          </a>
          <a class="item" href="#">
            <img src="http://i.imgur.com/6W8JOza.jpg" />
          </a>
          <a class="item" href="#">
            <img src="http://i.imgur.com/rwLY1JH.jpg" />
          </a>
        </div>
    </body>
</html>

您可以看到，在上面的代码片段中，代码工作正常并且应该正常工作，但是当我尝试在自己的计算机上运行它时，它无法正常工作。下面是我在 Chrome 和 Firefox 上加载 HTML 文件时的样子:

Firefox
Chrome

您可以看到它没有正确加载所有元素。这让我很困惑，因为这里的代码和我的机器上的代码实际上是相同的。我使用 Python http.server 函数进行托管。

浏览器控制台不会给出任何提示正在发生的情况的错误。事实上，两个控制台都在 JS 文件中的 $(document).ready 函数中记录“DOM Ready”，因此看起来一切都应该没问题。

什么可能导致这种情况发生？

编辑:我尝试更改标题中脚本标签的顺序，但没有帮助

最佳答案

我使用 npm-lite 在本地测试了您的代码，并发现了相同的错误，直到我移动

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

出<head></head>标签和其余 html 代码之后但在结束 </body> 之前标签。

我在 Chrome 和 Firefox 中对此进行了测试，它现在工作正常

关于javascript - 使用 JQuery 和 CSS 的 3D 轮播 - 无法正确渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36962720/

上一篇：javascript - 当 Canvas 的高度超过屏幕的高度时(当滚动条出现时)，如何在 Canvas (JavaScript)上测试鼠标检测

下一篇：javascript - HTML onchange 不会从 Ajax 插入中触发

相关文章：

javascript - 从服务器加载 .css 和 .js 文件时出现 GET 错误

javascript - 如何根据JavaScript中字符的位置提取子字符串？

php - 如何在页面重新加载时保留 jqGrid 中的页码和排序标准？

jQuery 函数调用

android - 使用 JSoup 解析 Twitter

c# - 使用正则表达式防止 XSS

javascript - 如何从 index.html 中的动态脚本中删除内容

javascript - 将 JSON 字符串转换为另一种格式

jquery - 垂直居中屏幕靠着元素

javascript - JQuery旋转前后动画

©2024 IT工具网  联系我们