1

我正在尝试制作自己的自定义 JQuery 幻灯片。幻灯片由一个 img 标签和一个文本标签组成。我希望这些数据可以在 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/>

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

它在 localhost 上运行，但在我的 goDaddy 服务器上却没有。F12 向我显示 src 属性不断变化，但未呈现更新 - 只有文本被更改。

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

这是我的代码 

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

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

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

4

0 回答 0