支持表格格式的 jQuery 幻灯片？

Question

我有一个客户，他有一个使用 Network Solutions 的 CommerceSpace 的网站，并且希望在首页上有一个图像推子。我遇到的唯一问题是我似乎无法使其正常工作，因为格式位于表格中。这是无法改变的，因为这就是该软件布置一切的方式。有人有想法吗？我想使用 jQuery Cycle 插件，但我无法让它正常工作。帮助？

它之前与 scriptaculous 一起工作，但我们没有决定使用它，因为 jQuery 对我们来说效果更好，而这就是之前的工作方式。

var e2; var f2; var g2;
activeImage = 2; paused=0; 

if (document.getElementsByClassName('specials')[0] && document.getElementById('ctl00_pageContent_ctl00_productList')) {
trs = document.getElementById('ctl00_pageContent_ctl00_productList').getElementsByTagName('tr');
featcount = 0; colcount = 1;
for (i=0;i<trs.length;i++) { 
    if (trs[i].className == "nojs") { continue; }
    featcount++; trs[i].id="featimg"+featcount; 
    tds = trs[i].getElementsByTagName('td'); tdnum = 0;
    timeout = "new Effect.Parallel([";

    for (j=0;j<tds.length;j++) { 
        if (tds[j].className == "nojs") { continue; }
        tds[j].id=trs[i].id+"td"+tdnum;
        if (tds[j].getElementsByTagName('div')[0]) {
            tds[j].getElementsByTagName('div')[0].id = tds[j].id+"div";
            if (featcount != activeImage) {
                tds[j].style.display='none'; 
                new Effect.Opacity(tds[j].id+"div", {from: 1, to:0, duration: 0});
            }
        }
        tdnum++; 
    }
}
function changeimg(direction,paused) {
    clearTimeout(e2);clearTimeout(f2);clearTimeout(g2);
    for3 = ""; for1 = "";
    oldImage = activeImage;
    if (direction=='previous'){activeImage = (activeImage == 1) ? featcount : activeImage-1;}
    else { activeImage = (activeImage >= featcount) ? 1 : activeImage+1;}

    timeout = "new Effect.Parallel([";
    for (i=0;i<colcount;i++) { timeout+="new Effect.Opacity('featimg"+oldImage+"td"+i+"div', {from: 1, to:0, duration: .5})"; if ((i+1)<colcount) { timeout+=","; }
    }
    e2 = setTimeout(timeout+"], {duration: 0, sync: true})",10);

    timeout = "new Effect.Parallel([";
    for (i=0;i<colcount;i++) { timeout+="new Effect.Fade('featimg"+oldImage+"td"+i+"', {duration: 0}),";}
    for (i=0;i<colcount;i++) { timeout+="new Effect.Appear('featimg"+activeImage+"td"+i+"', {duration: 0})"; if ((i+1)<colcount) { timeout+=","; }
    }
    f2 = setTimeout(timeout+"], {duration: 0, sync: true})",600);

    timeout = "new Effect.Parallel([";
    for (i=0;i<colcount;i++) { timeout+="new Effect.Opacity('featimg"+activeImage+"td"+i+"div', {from: 0, to:1, duration: 1})"; if ((i+1)<colcount) { timeout+=","; }
    }
    g2 = setTimeout(timeout+"], {duration: 0, sync: true})",700);

    if (direction=='auto' && paused==0) {t=setTimeout("changeimg('auto',"+paused+")",10000);}
    else {(pause(0))};
}
var t=setTimeout("changeimg('auto',0)",7000);

这

是表格的一般格式。

<table id="ctl00_pageContent_ctl00_productList" class="product-list" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
<tr>
<td class="product-list-item-container" style="width:100%;">
<div class="product-list-item" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_pageContent_ctl00_productList_ctl00_imbAdd')">
<div class='caption_wrapper' style='float:left; width:240px;'>
<a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-9.aspx">
<img class='product-list-img' src='/images/products/thumb/85caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' />
</a>
<div class='caption_description'>
<div class='caption_description_content' style='width:220px;'>
<p class="caption-title">  Large Ancient    Egyptian New Kingdom Clear Glass Bead 1500 BC. </p>

<p class="caption-price" style="padding-top:10px;">$28.00</p>
<p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pageContent$ctl00$productList$ctl00$imbAdd" id="ctl00_pageContent_ctl00_productList_ctl00_imbAdd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$pageContent$ctl00$productList$ctl00$imbAdd&quot;, &quot;&quot;, true, &quot;productList1739&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-9.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p>
</div>
</div>
</div>
</div>
</td>
</tr><tr>
<td class="product-list-item-container-alt" style="width:100%;">
<div class="product-list-item" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_pageContent_ctl00_productList_ctl01_imbAdd')">

<div class='caption_wrapper' style='float:left; width:240px;'>
<a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-6.aspx">
<img class='product-list-img' src='/images/products/thumb/82caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' />
</a>
<div class='caption_description'>
<div class='caption_description_content' style='width:220px;'>
<p class="caption-title">  Large Ancient Egyptian New Kingdom Clear Glass Bead 1500 BC.</p>
<p class="caption-price" style="padding-top:10px;">$28.00</p>
<p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pageContent$ctl00$productList$ctl01$imbAdd" id="ctl00_pageContent_ctl00_productList_ctl01_imbAdd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$pageContent$ctl00$productList$ctl01$imbAdd&quot;, &quot;&quot;, true, &quot;productList1736&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-6.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p>
</div>
</div>

</div>
</div>
</td>
</tr><tr>
<td class="product-list-item-container" style="width:100%;">
<div class="product-list-item" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_pageContent_ctl00_productList_ctl02_imbAdd')">
<div class='caption_wrapper' style='float:left; width:240px;'>
<a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-1-1-1-1-2.aspx">
<img class='product-list-img' src='/images/products/thumb/91caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' />
</a>
<div class='caption_description'>

<div class='caption_description_content' style='width:220px;'>
<p class="caption-title"> ANCIENT        EGYPTIAN    NEW   KINGDOM   MAGICAL GLASS   BEAD     1500 BC  </p>
<p class="caption-price" style="padding-top:10px;">$24.00</p>
<p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pageContent$ctl00$productList$ctl02$imbAdd" id="ctl00_pageContent_ctl00_productList_ctl02_imbAdd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$pageContent$ctl00$productList$ctl02$imbAdd&quot;, &quot;&quot;, true, &quot;productList1720&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-1-1-1-1-2.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p>
</div>
</div>
</div>
</div>
</td>
</tr><tr>

<td class="product-list-item-container-alt" style="width:100%;">
<div class="product-list-item" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_pageContent_ctl00_productList_ctl03_imbAdd')">
<div class='caption_wrapper' style='float:left; width:240px;'>
<a href="/rareashantibraceletc1880africanartantiquebracelet-scabra6-1-1-1.aspx">
<img class='product-list-img' src='/images/products/thumb/45caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' />
</a>
<div class='caption_description'>
<div class='caption_description_content' style='width:220px;'>
<p class="caption-title">  RARE   ASHANTI  BRACELET C1880 </p>
<p class="caption-price" style="padding-top:10px;">$120.00</p>

<p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pageContent$ctl00$productList$ctl03$imbAdd" id="ctl00_pageContent_ctl00_productList_ctl03_imbAdd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$pageContent$ctl00$productList$ctl03$imbAdd&quot;, &quot;&quot;, true, &quot;productList1714&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/rareashantibraceletc1880africanartantiquebracelet-scabra6-1-1-1.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p>
</div>
</div>
</div>
</div>
</td>
</tr><tr>
<td class="product-list-item-container" style="width:100%;">
<div class="product-list-item" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_pageContent_ctl00_productList_ctl04_imbAdd')">
<div class='caption_wrapper' style='float:left; width:240px;'>

<a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1.aspx">
<img class='product-list-img' src='/images/products/thumb/86caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' />
</a>
<div class='caption_description'>
<div class='caption_description_content' style='width:220px;'>
<p class="caption-title">    ANCIENT    EGYPTIAN    NEW KINGDOM   MAGICAL GLASS   BEAD   1500 BC</p>
<p class="caption-price" style="padding-top:10px;">$24.00</p>
<p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pageContent$ctl00$productList$ctl04$imbAdd" id="ctl00_pageContent_ctl00_productList_ctl04_imbAdd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$pageContent$ctl00$productList$ctl04$imbAdd&quot;, &quot;&quot;, true, &quot;productList1697&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p>
</div>
</div>
</div>
</div>

</td>
</tr>
</table>

Answer 1

让 javascript 用你的图像写出一个 div 。

document.write('<div class = "slideshow1">');
$('.product-list-img').each( function() { 
    document.write('<img src="'+this.src+'">') 
});
document.write('</div>')

window.onload= function() {
  $('.slideshow1').cycle({
        fx:       'fade',
        speed:     1500,
        timeout:   4000,
        next:      'slideshow1'
    });
};