Slicebox未显示任何错误,但屏幕上仍然没有任何内容

时间:2019-02-20 12:04:16

标签: javascript jquery html css

该代码在开发人员模式下未显示任何错误,但仍无法正常工作。 我从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>

1 个答案:

答案 0 :(得分:0)

运行您给出的代码段时,这是我看到的错误:

  

jQuery.Deferred异常:$(...)。slicebox不是一个函数   TypeError:$(...)。slicebox不是函数

仅从错误消息来看,看来您的问题未将Slicebox插件包含为JS文件

您需要转到Slicebox网站(在这种情况下为Github),下载 jquery.slicebox.js 文件,然后将其包含在您的网站中,如下所示: <script src='jquery.slicebox.js'></script>

但是,由于这是摘录中的内容,因此我不确定您是否仅在摘录中未包含依赖项,因此会引发此错误。

如果没有,您看到的错误是什么(也许检查控制台)?