我在我的 asp.net mvc 项目中使用这个幻灯片。
当我将模型数据放在我的页面中时,它运行良好,但是当我将其更改为从控制器获取的动态 JSON 数据时,它不起作用。
这是我简单的 html:
<ul class="ei-slider-large">
<li>
<img src="../../Product/760557822400.jpg" alt="image05" style="margin-top: 2.467px;"/>
<div class="ei-title">
<h2>
<span class="productName">Dell Lat E6320 Core W7P 13.3"HD BT WC</span>
<span class="productPrice">$110.00</span>
</h2>
<h3>
<span class="productSpec">
<br />
Dell Latitude E6320<br />
Processor (2.8GHz, 4M Cache)<br />
....
</span>
<span style="position:relative; left:-20px; top: -21px;"><a href="#" id="readmore">Read more</a></span>
</h3>
</div>
</li>
//there are 5 <li> in this <ul>
</ul>
这是幻灯片的缩略图:
<ul class="ei-slider-thumbs" style="position:relative; left:-12px;">
<li class="ei-slider-element">Current</li>
<li><a href="#"><span style="font-weight:bold;">DELL</span> <br /> Lat E6320 </a></li>
<li><a href="#"><span style="font-weight:bold;">SONY</span> <br /> Lat E6320 </a></li>
<li><a href="#"><span style="font-weight:bold;">LENOVO</span> <br /> Lat E6320 </a></li>
<li><a href="#"><span style="font-weight:bold;">ACER</span> <br /> Lat E6320 </a></li>
<li><a href="#"><span style="font-weight:bold;">APPLE</span><br /> Lat E6320 </a></li>
</ul>
现在我更改了简单数据以使用我的动态数据:
function itemSlideShow(_pictureName10,_name,_price,_notes,_id,_depID,_catID) {
var dotString = "";
if (_notes.length < 120) {
dotString = "";
} else {
dotString = " <br/> ....";
}
var listSlide = '<li>' +
'<img src="../../Product/' + _pictureName10 + '" alt="Product" width="135px"/>' +
'<div class="ei-title"><h2>' +
'<span class="productName">' + TrimString(_name, 80) + '<br /></span>' +
'<span class="productPrice"> $' + formatCurrency(_price) + '</span></h2>' +
'<h3><span class="productSpec"><br />' + TrimString(_notes, 120) + dotString + '<br /></span>' +
'<span style="position:relative; left:-20px; top: -21px;">' +
'<a href="Products/ProductSpec/' + _id + '?dep=' + _depID + '&cat=' + _catID + '&tab=2" style="text-decoration:none;" id="readmore">Read more</a></span></h3></div>' +
'</li>';
return listSlide;
}
var smallLi = "";
var url = '<%: Url.Content("~/") %>' + "Home/GetNewProduct";
$.getJSON(url, function (newProduct) {
var contentNewProduct = $("ul.ei-slider-large");
var smallNewProduct = $("ul.ei-slider-thumbs");
$.each(newProduct.ja, function (index, data) {
var smallLi = $('<li><a href="#"><span style="font-weight:bold;">' +
TrimStringAddNewLine((TrimString(data.Name, 12)).toUpperCase()) +
'</span><br />' +
'</a></li>');
contentNewProduct.append(itemSlideShow(data.PictureName10,data.Name,data.Price,data.Notes,data.ID,data.DepartmentID,data.CategoryID));
smallNewProduct.append(smallLi);
});
});
loading
当我使用此 jquery 附加数据而不是静态加载数据时,幻灯片被幻灯片放映的面板 卡住了。
谁能告诉我,我在这里怎么错了?
提前致谢。