Javascript JQuery幻灯片放映技术

我正在尝试制作自己的自定义JQuery幻灯片。幻灯片由img标签和文本p标签组成。我希望这些数据可以在ul li标签中提供，例如

<ul>
  <li>image1.jpg</li>
  <li>THIS IS TEXT<li/>
<ul/>
<ul><li><li/><ul/>

和幻灯片元素中提供的幻灯片模板

<div id="slideshow">
  <img src="image1">
  <p>THIS IS TEXT</p>
<div/>

然后，我的技术是将所有数据存储在变量中，并使用setIntervalfunction{}，3000在幻灯片中循环-并在每次循环后用当前图像修改img标记的src属性，用当前文本修改p标记

它在本地主机上工作，但在我的goDaddy服务器上没有。F12向我展示了src属性一直在更改，但更新没有呈现-只更改了文本

然后，我认为图像必须存储在页面的某个地方，并带有一个显示：无，以便可以立即访问，所以我将其添加到代码中，但仍然没有更改

这是我的密码

这种技术有什么问题，正确的技术是什么

---

查看其他幻灯片，看起来您必须在页面上显示所有幻灯片，显示：无，然后在幻灯片中旋转，将当前幻灯片更改为显示：块。这是否正确？

更改src属性将触发新的HTTP请求，并且每次图片更改时都需要设置新的TCP连接，这不是很实际。以某种方式更改已加载对象的可见性是正确的。你的问题不是很清楚。我能给你的最好建议就是去看看别人的解决方案，从中获得一些灵感。

$(function(){
 $(".slider").each(function(i, slideElem){
var slides=[];
$(slideElem).find("div ul").each(function(i, elem){
  var slide={};
  slide.image=$.trim($(elem).find("li:first").html());
  slide.text1=$.trim($(elem).find("li").eq(1).html());

  slide.text2 = $(elem).find("li").length > 2 ? $.trim($(elem).find("li").eq(2).html())                       : "";    
  slides.push(slide);
});

var cache=$("<div>").css("display", "none").appendTo(slideElem);
$(slides).each(function(i, val){
  cache.append($("<img>").attr("src", val.image));
});

$(slideElem).find("div").has("ul").remove();
setInterval(function () {
  var start=1;
  var slider=$(slideElem);
  var n;
  if((n=slider.data("next"))==undefined) n=0;
  if(n>=slides.length) n=start;
  var slide=slides[n];
  var p=slide.text1 + (slide.text2 ? ("<br />\n" + slide.text2) : "");
  var image = slide.image;

  slider.find("p").html("").html(p);
  slider.children("img").attr("src", image);

  if(n<(slides.length-1)) n++; else n=0;
  slider.data("next", n)    
    }, 3300);    
  });
 });