我试图用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">«</a>
<a class="next">»</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函数进行托管。
浏览器控制台不会提供任何可能暗示正在发生的事情的错误。事实上，两个控制台都记录了DOM准备好了＃39;在JS文件的$(document).ready函数中，看起来一切都应该没问题。
可能导致这种情况发生的原因是什么？
编辑：我尝试更改标题中脚本标记的顺序，但它没有帮助
答案 0 :(得分：0)
我使用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中对它进行了测试，它现在运行得很好