该代码在开发人员模式下未显示任何错误，但仍无法正常工作。 我从https://www.youtube.com/watch?v=q_RaXJhcwJE
拿走了如果发现任何错误或任何错误，请帮助我。该代码与视频中的代码完全相同，但是我认为可能存在一些错误，或者可能需要一些其他文件。
此外，如果您知道如何学习分片盒或有任何资源，请分享它。
<!DOCTYPE html>
<html>
<head>
<title>sliced image slider</title>
<link rel="stylesheet" type="text/css" href="slicebox/css/demo.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="slicebox/js/modernizr.custom.46884.js"></script>
<script src="slicebox/js/jquery.slicebox.min.js"></script>
<style type="text/css">
.sb-slider{
margin: 10px auto;
position: relative;
overflow: hidden;
width: 100%;
list-style: none;
padding: 0;
}
.sb-slider li{
margin: 0;
padding: 0;
display: none;
}
.sb-slider li > a{
outline: none;
}
.sb-slider li > a img{
border: none;
}
.sb-slider img {
max-width: 100%;
display: block;
}
.sb-description{
padding: 20px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 2000;
position: absolute;
background: #cbbfae;
background: rgba(190, 176, 155, .4);
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity:=0);
opacity: 0;
color: white;
transition: all 200ms;
}
.sb-slider li.sb-current .sb-description{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter: alpha(opacity:=80);
opacity: 1;
}
.sb-slider li.sb-current .sb-description:hover{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=99);
filter: alpha(opacity:=99);
background: rgb(190, 176, 155,.7);
}
.sb-perspective{
position: relative;
}
.sb-perspective > div {
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.sb-slide{
margin: 0;
display: block;
position: absolute;
transform-style: preserve-3d;
}
.container{
margin: 30px;
}
.shadow{
width: 100%;
height: 168px;
position: relative;
margin-top: -100px;
background: url('slicebox/images/shadow.png') 100% 100%;
z-index: -1;
display: none;
}
.sb-description h3{
font-size: 20px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.sb-description h3 a{
color: #4a3c27;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
}
.nav-arrows{
display: none;
}
.nav-arrows a{
width: 42px;
height: 42px;
background: #cbbfae url('jw.png') no-repeat top left;
position: absolute;
top: 50%;
left: 2px;
text-indent: -9000px;
cursor: pointer;
margin-top: -21px;
opacity: 0.9;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.nav-arows a:first-child{
left: auto;
right: 2px;
background-position: top right;
}
.nav-arows a:hover{
opacity: 1;
}
.nav-dots{
text-align: center;
position: absolute;
bottom: -5px;
height: 30px;
width: 100%;
left: 0;
display: none;
}
.nav-dots span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #cbbfae;
cursor: pointer;
box-shadow: 0 1px 1px rgba(255,255,255,0.6)
inset 0 1px 1px rgba(255,255,255,0.1);
}
.nav-dots span.nav-dot-current{
box-shadow: 0 1px 1px rgba(255,255,255,0.6) inset 0 1px 1px rgba(255,255,255,0.1)
inset 0 0 0 8px rgba(255,255,255,1)
}
.nav-options{
width: 70px;
height: 30px;
position: absolute;
right: 70px;
bottom: 0px;
display: none;
}
.nav-options span{
width: 30px;
height: 30px;
background: #cbbfae url('jw.png') no-repeat top left;
text-indent: -9000px;
cursor: pointer;
opacity: 0.7;
display: inline-block;
border-radius: 50%;
}
.nav-options span:first-child{
background: -30px 0px;
margin-right: 3px;
}
.nav-options span:hover{
opacity: 1;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid">
<div class="wrapper">
<ul class="sb-slider" id="sb-slider col-md-offset-4">
<li>
<a href=""><img src="slicebox/images/1.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
<li>
<a href=""><img src="slicebox/images/2.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
<li>
<a href=""><img src="slicebox/images/3.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
<li>
<a href=""><img src="slicebox/images/4.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
</ul>
<div id="shadow" class="shadow"></div>
<div id="nav-arrows" class="nav-arrows">
<a href="">Next</a>
<a href="">Previous</a>
</div>
</div>
</div>
<script type="text/javaScript">
$(document).ready(function(){
var page = (function(){
var $navArrows = $ ('#nav-arrows').hide(),
$shadow = $('#shadow').hide(),
slicebox = $('#sb-slider').slicebox({
onReady : function(){
$navArrows.show();
$shadow.show();
},
orientation: 'r',
cuboidsRandom: true,
disperseFactor: 30
}),
init = function(){
initEvents();
},
initEvents = function(){
$navArrows.children(':first').on('click', function(){
slicebox.next();
return false;
});
$navArrows.children(':last').on('click', function(){
slicebox.previous();
return false;
});
};
return {init : init};
})();
page.init();
});
</script>
</body>
</html>
答案 0 :(得分：0)
运行您给出的代码段时，这是我看到的错误：
jQuery.Deferred异常：$（...）。slicebox不是一个函数 TypeError：$（...）。slicebox不是函数
仅从错误消息来看，看来您的问题未将Slicebox插件包含为JS文件。
您需要转到Slicebox网站（在这种情况下为Github），下载 jquery.slicebox.js 文件，然后将其包含在您的网站中，如下所示：
<script src='jquery.slicebox.js'></script>
但是，由于这是摘录中的内容，因此我不确定您是否仅在摘录中未包含依赖项，因此会引发此错误。
如果没有，您看到的错误是什么（也许检查控制台）？