javascript - JQueryスライドショーテクニック

Question

独自のカスタムJQueryスライドショーを作成しようとしています。スライドは、テキスト用のapタグ付きのimgタグで構成されています。このデータをulliタグで提供できるようにしたかったのです。

<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/>

次に、すべてのデータを変数に格納し、setInterval（function（）{}、3000）を使用してスライドをループし、ループごとに現在の画像でimgタグのsrc属性を変更し、現在のテキストでpタグを変更しました。

ローカルホストでは機能していましたが、goDaddyサーバーでは機能しませんでした。F12は、src属性が一貫して変更されていることを示しましたが、更新はレンダリングされません。テキストのみが変更されていました。

次に、画像をページのどこかにdisplay：noneで保存して、すぐにアクセスできるようにする必要があると考えたので、それをコードに追加しましたが、変更はありません。

これが私のコードです

$(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);    
  });
 });

このテクニックの何が問題になっていて、正しいテクニックは何ですか？

他のスライドショーを見ると、display：noneを使用してすべてのスライドをページに配置してから、スライドを回転させて現在のスライドをdisplay：blockに変更する必要があるようです。これは正しいですか？