我有一个我的应用程序模板，其中有一个用于滑块图像的carousal。
我想通过json将图像显示到滑块，但图像不会显示。
如果我尝试显示没有滑块的图像，则可以正常工作。
但后来我希望那些图像在转盘中。
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../www/img/splash/splash-icon.png">
<link rel="apple-touch-startup-image" href="../www/img/splash/splash-screen.png" media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="../www/img/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" sizes="640x1096" href="../www/img/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="../www/img/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="../www/img/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="../www/img/splash/splash-screen-ipad-portrait-retina.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="../www/img/splash/splash-screen-ipad-landscape-retina.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"/>
<title>Hello There!</title>
<link href="../www/css/style.css" rel="stylesheet" type="text/css">
<link href="../www/css/colors/default.css" rel="stylesheet" type="text/css" id="pagestyle">
<link href="../www/css/framework.css" rel="stylesheet" type="text/css">
<link href="../www/css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="../www/css/owl.theme.css" rel="stylesheet" type="text/css">
<link href="../www/css/swipebox.css" rel="stylesheet" type="text/css">
<link href="../www/css/colorbox.css" rel="stylesheet" type="text/css">
<!--<script type="text/javascript" src="../www/js/index.js"></script> -->
<script type="text/javascript" src="../www/js/jquery.js"></script>
<script type="text/javascript" src="../www/js/jqueryui.js"></script>
<script type="text/javascript" src="../www/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="../www/js/jquery.swipebox.js"></script>
<script type="text/javascript" src="../www/js/colorbox.js"></script>
<script type="text/javascript" src="../www/js/snap.js"></script>
<script type="text/javascript" src="../www/js/contact.js"></script>
<script type="text/javascript" src="../www/js/custom.js"></script>
<script type="text/javascript" src="../www/js/framework.js"></script>
<script type="text/javascript" src="../www/js/framework.launcher.js"></script>
</head>
<body>
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="all-elements">
<div id="sidebar" class="page-sidebar">
<div class="page-sidebar-scroll">
<div class="sidebar-content-background">
<div class="sidebar-section">
<a href="#" class="sidebar-close"></a>
<em>Navigation</em>
</div>
<div class="sidebar-decoration"></div>
<a href="#" class="sidebar-logo"></a>
<div class="sidebar-decoration"></div>
<div class="sidebar-navigation">
<div class="nav-item">
<a href="index.html" class="active-nav">Homepage</a>
</div>
<div class="nav-item">
<a href="../www/about.html" class="nav-regular">About Us</a>
</div>
<div class="nav-item">
<a href="../www/gallery.html" class="nav-regular">Gallery</a>
</div>
<div class="nav-item">
<a href="../www/menu.html" class="nav-regular">Menu</a>
</div>
<div class="nav-item">
<a href="../www/contact.html" class="nav-regular">Contact</a>
</div>
<div class="nav-item">
<a href="#" class="nav-regular close-sidebar">Close</a>
</div>
</div>
<br><br><br><br><br>
<div class="sidebar-decoration"></div>
<p class="sidebar-copyright">Copyright 2016. All rights reserved</p>
</div>
</div>
</div>
</div>
<div id="content" class="page-content">
<div class="content-controls">
<a href="#" class="deploy-sidebar"></a>
<em>HOMEPAGE</em>
</div>
<div class="content">
<div class="decoration"></div>
<div class="container ">
<div class="slider-controls" data-snap-ignore="true">
</div>
<a href="#" class="next-slider"></a>
<a href="#" class="prev-slider"></a>
</div>
<div class="decoration"></div>
<div class="container no-bottom fine">
</div>
<div class="decoration"></div>
<div class="container">
<div class="footer-socials">
<a href="#" class="facebook-footer"></a>
<a href="#" class="goup-footer"></a>
<a href="#" class="twitter-footer"></a>
</div>
<p class="copyright uppercase center-text no-bottom">Copyright 2016<br> All rights reserved</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var url = 'http://localhost/1/libs/homepage.php?home=home';
$.getJSON(url, function(data) {
$.each(data, function(index, data) {
$('.fine').append(data);
});
});
});
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
checkConnection();
}
function checkConnection() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = '1';
states[Connection.ETHERNET] = '1';
states[Connection.WIFI] = '1';
states[Connection.CELL_2G] = '1';
states[Connection.CELL_3G] = '1';
states[Connection.CELL_4G] = '1';
states[Connection.CELL] = '1';
states[Connection.NONE] = '0';
if (states[networkState] == '1'){
// Do nothing..
} else {
window.plugins.toast.show('No Network Connection','long','bottom');
$(document).ready(function(){
$('.fine').append('<center><br /><br /><h4 style="color:#006699">You Seem to be offline!</h4> <a href="#" onclick="return reFresh()" class="btn btn-warning btn-block">Check your connection & Click here to Try Again</a></center><br /><br /><br /><br />');
});
}
}
function reFresh() {
location.reload();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = 'http://localhost/1/libs/sliderpage.php';
$.getJSON(url, function(data) {
$.each(data, function(index, data) {
$('.slider-controls').append('<div><img src="http://localhost/1/gangster/screenshots/slider/'+data.img+'"></div>');
});
});
});
</script>
<script type="text/javascript">
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</body>
</html>
Following is the screenshot where in the empty place, i want my images to be displayed as carousal请帮我解决这个问题并检查语法是否正确。
