我正在使用全屏旋转滑块。滑块的内容来自服务器的JSON格式，我使用该JSON在javascript中构建HTML。构建HTML后，我用新内容替换了滑块的内容。
现在是这个场景。在第一次加载页面时，会向服务器发出AJAX调用，该服务器返回JSON并使用该JSON构建标记。然后使用ul jquery方法将该标记加载到html()，并调用一个函数来启动革命滑块。滑块完美启动。完成一分钟后，再次向服务器发出JSON调用，并重复整个过程。现在这次，当我更换内容时，滑块坏了。我认为这是因为滑块正在使用内容而我将替换它们。如果我prepend()内容滑块正常工作，但它总是会预先添加内容，li中会有很多ul个元素。有没有办法让我可以在不破坏代码的情况下替换内容。我需要替换内容，因为我想从服务器上显示最新的内容。
这是我启动滑块的功能：
function startSlider() {
jQuery("#slider1").revolution({
sliderType: "standard",
sliderLayout: "fullscreen",
delay: 6000,
lazyType: "single",
disableProgressBar: "on",
navigation: {
onHoverStop:"off"
}
});
}
这个加载图片:(你可以检查这个函数的最后5行，因为它们正在加载内容，所有其他行都只是构建标记）
function loadImages() {
var eventId = $("input[name='eventid'").val();
var htmlContents = "";
var eventId = 25;
var transitions = [
"slideup", "fade", "slidedown", "slideright", "slideleft", "slidehorizontal", "slidevertical",
"slideoverup", "slideoverdown", "slideoverright", "slideoverleft", "slideoverhorizontal",
"slideoververtical", "boxslide", "slotslide", "slotslide", "boxfade", "slotfade", "slotfade",
"fadefromright", "fadefromleft", "fadefromtop", "fadefrombottom", "fadetoleftfadefromright",
"fadetorightfadefromleft", "fadetotopfadefrombottom", "fadetobottomfadefromtop", "parallaxtoright",
"parallaxtoleft", "parallaxtotop", "parallaxtobottom", "parallaxhorizontal", "parallaxvertical",
"scaledownfromright", "scaledownfromleft", "scaledownfromtop", "scaledownfrombottom", "zoomout",
"zoomin", "slotzoom: orizontal", "curtain", "3dcurtain", "cube", "incube", "turnoff", "papercut",
"flyin", "slideremoveup", "slideremovedown", "slideremoveright", "slideremoveleft", "slideremovehorizontal",
"slideremovevertical"
];
var easeinout = [
"Power0.easeInOut", "Power1.easeInOut", "Power3.easeInOut", "Power4.easeInOut", "Quad.easeInOut",
"Cubic.easeInOut", "Quart.easeInOut", "Quint.easeInOut", "Strong.easeInOut", "Back.easeInOut",
"Bounce.easeInOut", "Circ.easeInOut", "Elastic.easeInOut", "Expo.easeInOut", "Sine.easeInOut"
];
var htmlContents = "";
var previousTrans = "slideup";
var trans = "fade";
var previousEase = "Power0.easeInOut";
var ease = "Power1.easeInOut";
$.getJSON("slidercontents/" + eventId, function (data) {
$.each(data, function () {
while (trans == previousTrans)
{
trans = transitions[Math.floor(Math.random() * transitions.length)];
}
while(ease == previousEase)
{
ease = easeinout[Math.floor(Math.random() * easeinout.length)];
}
previousTrans = trans;
previousEase = ease;
htmlContents += '<li data-transition="' + trans + '" data-delay="6000">';
htmlContents += '<!-- MAIN IMAGE -->';
htmlContents += "<img src=\"{{ asset('uploads/eventphotos') }}/";
var imageCounter = 0;
if (this.photo === 'null' || this.photo === "" || this.photo === null)
{
var newPhoto = this.photo;
while (newPhoto === 'null' || newPhoto === "" || newPhoto === null)
{
if (imageCounter == 100)
{
break;
}
var index = Math.floor(Math.random() * data.length) - 1;
if (index >= 0)
{
newPhoto = data[index].photo;
}
else
{
newPhoto = data[0].photo;
}
imageCounter++;
}
htmlContents += newPhoto;
}
else
{
htmlContents += this.photo;
}
htmlContents += '" />alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">';
htmlContents += '<!-- LAYER NR. 1 -->';
htmlContents += '<div class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0" ';
htmlContents += 'data-x="[\'right\',\'right\', \'right\', \'right\']" data-hoffset="[0, 0, 0, 0]" ';
htmlContents += 'data-y="[\'bottom\', \'bottom\', \'right\',\'right\']" data-voffset="[0, 0, 0, 0]" ';
htmlContents += 'data-whitespace="normal" ';
htmlContents += 'data-transform_idle="o:1;" ';
htmlContents += 'data-transform_in="x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Sine.easeInOut;" ';
htmlContents += 'data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Sine.easeInOut;" ';
htmlContents += 'data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" ';
htmlContents += 'data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" ';
htmlContents += 'data-start="1000" >';
//htmlContents += "<div id=\"profile-pic-div\"><img class=\"profile-pic\" style=\"margin-left: 6px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; width: 96px; height: 96px;\" src='";
htmlContents += "<h3 id=\"heading-contetns\" style=\"padding: 8px; line-height: 1.1; font-size: 18px; width: 560px; height: auto; word-wrap: break-word; background: transparent url({{ asset('sximo/images/specch-lg.png') }}) no-repeat scroll 0px 0;background-size: 100% 100%;border-radius: 20px !important;\"><img class=\"profile-pic\" style=\"margin-left: 6px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; width: 96px; height: 96px; float: right;\" src='";
if (UrlExists("{{ asset('uploads/profilepics') }}" + "/preview_" + this.sender + ".jpg"))
{
htmlContents += "{{ asset('uploads/profilepics') }}" + "/preview_" + this.sender + ".jpg' />";
}
else
{
htmlContents += "{{ asset('uploads/profilepics') }}" + "/logo-white.png' />";
}
//htmlContents += "<div id=\"paragraph-div\"><p id=\"message-body\">";
htmlContents += "<span style=\"overflow: hidden;\">";
var messageCounter = 0;
if (this.messagetext == null || this.messagetext == "" || this.messagetext == "null")
{
var newMessage = this.messagetext;
while (newMessage == null || newMessage == "" || newMessage == "null")
{
if (messageCounter == 10)
{
break;
}
var index = Math.floor(Math.random() * data.length) - 1;
if (index >= 0)
{
newMessage = data[index].messagetext;
}
else
{
newMessage = data[0].messagetext;
}
messageCounter++;
}
htmlContents += newMessage;
}
else
{
htmlContents += this.messagetext;
}
//htmlContents += "</p></div>";
htmlContents += "</span><span style=\"clear: both; display: block;\"></span></h3>";
htmlContents += '</div>';
htmlContents += '</li>';
});
//$('#slider-ul').empty();
$('#slider-ul').replaceWith(htmlContents);
console.log("Activating slider now");
startSlider();
});
}
这个启动滑块并为滑块设置计时器：
$(document).ready(function () {
loadImages();
setInterval(loadImages, 60000);
});