我的客户有一个网站使用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("ctl00$pageContent$ctl00$productList$ctl00$imbAdd", "", true, "productList1739", "", 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("ctl00$pageContent$ctl00$productList$ctl01$imbAdd", "", true, "productList1736", "", 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("ctl00$pageContent$ctl00$productList$ctl02$imbAdd", "", true, "productList1720", "", 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("ctl00$pageContent$ctl00$productList$ctl03$imbAdd", "", true, "productList1714", "", 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("ctl00$pageContent$ctl00$productList$ctl04$imbAdd", "", true, "productList1697", "", 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>
答案 0 :(得分:0)
让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'
});
};