我已经实现了幻灯片js() 在我的页面中。我已经编写了一个脚本来初始化幻灯片，如下所示，
<script>
$(function () {
$('#slides').slidesjs({
width: 940,
height: 500,
navigation: false
});
});
</script>
但是现在当我从数据库动态地向页面添加内容时，下一张幻灯片不起作用，有人说我需要刷新上面的脚本来重新构建幻灯片..现在的问题是我应该如何通过jQuery刷新它..？？我也应该发布jQuery代码吗？
以下是我的jsp代码
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="resources/js/jquery.slides.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<script src="resources/js/bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- End SlidesJS Required: Start Slides -->
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function () {
$('#slides').slidesjs({
width: 940,
height: 500,
navigation: false
});
});
</script>
<!-- End SlidesJS Required -->
<script src="resources/js/getProduct.js"></script>
</head>
<body class="bodybg">
<header class="header">
<br>
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-2 text-right">
<div class="dropdown ">
<a href="#" data-toggle="dropdown" class="dropdown-toggle Language">Welcome, User 1 <b class="caret caretnew"></b></a>
<ul class="dropdown-menu pull-right">
<li><a href="#">Setting</a></li>
<li><a href="#">Edit Profile </a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-left"> <img src="resources/images/logo.jpg" width="67" height="80" alt="" /> </div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-left padding0 margin-left3">
<h1 class="pageheader">Product List</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding0">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-12 text-right voffset2 Language ">Language</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12 padding0 ">
<ul class="nav nav-tabs">
<li class="dropdown active">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">English <b class="caret"></b></a>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<h3 class="pageheader2 text-left voffset4"><a>Select your product</a></h3>
<div id="slides">
<a href="#" id="prevButton" class='slidesjs-previous slidesjs-navigation newCallPrev'><img src='resources/images/pre_icon.png'>Prev</a>
<div id="item1" class="item">
<div id="offset1" class="voffset4">
<!-- First row of three elements -->
</div>
<div class="clearfix"></div>
<div id="offset2" class="voffset1">
<!-- Second row of three elements -->
</div>
</div>
<a id="nextButton" class='slidesjs-next slidesjs-navigation newCallNext' href="#">Next <img src='resources/images/next_icon.png'></a>
</div>
</div>
</body>
</html>
现在下面是JS文件
$(document).ready(function(){
var n = 0;
var productCount;
var page=1;
var firstOff = 1;
var secondOff = 2;
var item1 = 1;
var item2=2;
drawRow(n,6);
function drawRow(pageNumber,pageSize){
$.ajax({
url : "product/getProduct/pageNumber/"+pageNumber+"/pageSize/"+pageSize,
type : "GET",
contentType : "application/json",
success:function(result)
{
if(result.statusCode==200)
{
var productDiv;
productCount = result.productCount;
if(pageNumber==0)
{
$("#prevButton").hide();
}
else if(pageNumber>0)
{
$("#prevButton").show();
}
if((productCount-(page*pageSize))>0)
{
$("#nextButton").show();
}
else if((productCount-(page*pageSize))<=0)
{
$("#nextButton").hide();
}
$(".voffset4").children().remove();
$(".voffset1").children().remove();
$.each(result.productVo,function(i,obj)
{
productDiv = "<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>"+
"<a herf='#' class='btn btn-lg btn-default col-lg-12 col-md-12 col-sm-12 col-xs-12 vcardbg'>"+
"<div class='pull-left col-lg-3 col-md-4 col-sm-4 col-xs-3 col-lg-offset-2'>" +
"<img src="+obj.productIcon+" class='img-resposive'>"+
"</div>"+
"<span class='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left'>"+obj.productName+"</span>" +
"</a>" +
"</div>";
if(i<3)
{
$("#offset"+firstOff).append(productDiv);
}
else
{
$("#offset"+secondOff).append(productDiv);
}
$("#item"+item1).css("position","static");
});
}
else
{
alert(result.statusMessage);
}
},
error : function(e)
{
console.log("ERROR: ", e);
}
});
}
$(".newCallNext").click(function(){
page=page+1;
n=n+6;
firstOff = firstOff+2;
secondOff = secondOff+2;
var $slideNext = $("<div id='item"+item2+"' class='item'>"+
"<div id=offset"+firstOff+" class='voffset4'></div>"+
"<div class='clearfix'></div>"+
"<div id=offset"+secondOff+" class='voffset1'></div>"+
"</div>");
$("#item"+item1).append(slideNext);
$slideNext.slidesjs({
width: 940,
height: 500,
navigation: true
});
drawRow(n,6);
item1 = item2;
item2 =item2+1;
});
$(".newCallPrev").click(function(){
page= page-1;
n=n-6;
drawRow(n,6);
});
});
从数据库动态向页面添加内容后，再次调用并初始化函数 $（'#slides'）.slidesjs（）