用js加载轮播div图片不显示。

bosaidongmomo 2017-10-16 09:25:42

源码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1">


<meta name="renderer" content="webkit">


<meta http-equiv="Cache-Control" content="no-siteapp"/>

<link rel="icon" type="image/png" href="assets/i/favicon.png">


<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">


<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<style>
td{width:50px;}
.blueButton {
position: absolute;
display: block;
width: 50px;
height: 30px;
background-color: #00b3ee;
color: #fff;
text-decoration: none;
text-align: center;
font: normal normal normal 12px/28px 'YaHei';
cursor: pointer;
border-radius: 4px;
}

.blueButton:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}

.blueButton input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<link rel="stylesheet"
href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet"
type="text/css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet"
type="text/css">
<script type="text/javascript" src="js/stu.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生端</title>
</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
<div class="span12">
<ul class="nav nav-pills">
<li style="color: #F00; font-size: 18px;" class="active"><a
href="index.jsp">首页</a></li>
<li style="color: #F00; font-size: 18px;"><a href="#"><c:out
value="${stuName }"></c:out> 您好</a></li>
<li style="color: #F00; font-size: 18px;" class="disabled"><a
href="#">欢迎使用</a></li>
</ul>
<div class="row-fluid">

<div class="span8">
<div class="carousel slide" id="carousel-287925">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel" class="active"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">

<div class="item active">
<img alt="First" src="img/pic.jpg" width="100%" height="40%" />
<div class="carousel-caption">
<h4>摄影作品</h4>
<p>该摄影作品是由学生小红在旅程中拍下的。</p>
</div>
</div>
<div class="item">
<img alt="Second" src="img/pic1.jpg" width="100%" height="40%" />
<div class="carousel-caption">
<h4>PS作品</h4>
<p>该作品是同学小蓝的作业。</p>
</div>
</div>
<div class="item">
<img alt="Third" src="img/pic2.jpg" width="100%" height="100%" />

<div class="carousel-caption">
<h4>新绿作品</h4>
<p>该作品是同学小绿的作业。</p>
</div>
</div>
<a data-slide="prev" href="#carousel-287925"
class="left carousel-control">›</a> <a data-slide="next"
href="#carousel-287925" class="right carousel-control">›</a>
</div>
</div>
</div>
<div class="span4">
<h2>标题</h2>
<p>本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页,
下一次打开仍然能恢复上一次的操作.</p>
<p>
<a class="btn" href="#">查看更多 »</a>
</p>
</div>
</div>

</div>
</div>
<div class="row-fluid">
<div class="span1">
<ul class="nav nav-list">
<li class="nav-header">学生用户</li>
<li class="active"><a id="${stuID }" href="javascript:"
onclick="searchStu(this.id)">个人信息</a></li>
<li><a id="${stuClass }" href="javascript:"
onclick="searchTask(this.id,'${stuID }')">作业详情</a></li>
<li><a href="login.jsp">退出登录</a></li>
</ul>
</div>
<div class="span11" id=studentInfo></div>
</div>
</div>

</body>
</html>

js在id为studentInfo的div加用.html方法加元素：
<script type="text/javascript">
pictureShow=function(){
var param = "stuTask.do?operate=pictureShow"
$.ajax({
url : param,
type : "POST",
dataType : "json",
scriptCharset : 'utf-8',
// contentType : 'application/x-www-form-urlencoded;',
error : function(data) {
alert("查询失败")
},
success : function(data) {
if (data.length == 0) {
alert("数据为空");
}
var imgStr= new String();

for (var i = 0; i < data.length; i++) {
imgStr+="<div class=\"item\">"
+"<img alt=\""+data[i].id+"\" src="+data[i].filepath+" width=\"100%\" height=\"40%\" />"
+"<div class=\"carousel-caption\">"
+"<h4>"+data[i].title+" 作者:"+data[i].author+"</h4>"
+"<p>"+data[i].description+"</p>"
+"</div>"
+"</div>"

}

// <td name=""><a href="" onclick=""></a></td>
$("#carousel").html(imgStr);
//$("#student-thead").html(theadStr);
}
});
}
</script>

数据都能获取
diaryjson:{"filepath":"img/pic.jpg","id":0,"description":"该摄影作品是由学生小红在旅程中拍下的。","title":"摄影作品","author":"小红"}
diaryjson:{"filepath":"img/pic1.jpg","id":1,"description":"该作品是同学小蓝的作业。","title":"PS作品","author":"小蓝"}
diaryjson:{"filepath":"img/pic2.jpg","id":2,"description":"该作品是同学小绿的作业。","title":"新绿作品","author":"小绿"}

图片也是链接没有错误

但是页面一片空白。
我想动态加载图片，比方说，用户在一个文件夹里上传文件，我再把这个文件夹里的东西轮播显示出来。应该是因为class=item的缘故，但是我不知道怎么改了。难道轮播的图片只能用死值？

...全文

1184 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2017-10-17

打赏
举报

ajax动态加载要在你加载完毕后手动调用焦点图的api来初始化，要不一般初始化都在dom ready中，ajax返回dom ready已经执行完毕了，要自己手动调用 $("#carousel").html(imgStr); //初始化交掉图代码

Web开发学习资料推荐
javascript混淆加密
jqGrid导航Navigator配置