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

Question

我正在尝试用JQuery和CSS实现CD轮播，我一直在浏览StackOverflow的一些想法。 我遇到了这个问题 。 我一直在尝试在我自己的机器上实现构思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文件时的样子：

火狐
铬

你可以看到它没有正确加载所有元素。 这让我很难过，因为代码在这里和我的机器上完全相同。 我正在使用Pythons http.server函数进行托管。

浏览器控制台不会提供任何会暗示正在发生的事情的错误。 实际上，两个控制台都在JS文件的$(document).ready函数中记录'DOM ready'，所以看起来一切都应该没问题。

是什么导致这种情况发生？

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

Answer 1

我使用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中对它进行了测试，它现在运行得很好