这是数据
- JScript code
var jsonData = { shop: { title: '这是wddlzzxsdz的店铺', url: '', rawUrl: 'www.sina.com' }, pages: [{ title: '', items: [{ title: '2012新款韩版软底平跟单鞋 舒适可爱兔斯基全真皮休闲平底女鞋', desp: '', url: '', rawUrl: 'http://item.taobao.com/item.htm?spm=545.66420.131756.13&id=15733848791&ali_trackid=4_10604_1-2', imgs: [{ isDefault: true, url: 'http://img02.taobaocdn.com/bao/uploaded/i2/T1ZMuTXi0uXXc_cS38_071637.jpg_310x310.jpg' }] }, { title: '2012新款女鞋 潮日系 vivi 杂志款性感真皮凉拖 厚底蝴蝶结女凉鞋', desp: '', url: '', rawUrl: 'http://item.taobao.com/item.htm?spm=545.66420.131756.28&id=13901113685&&ali_trackid=4_10602_1-5', imgs: [{ isDefault: true, url: 'http://img03.taobaocdn.com/bao/uploaded/i3/T1rfWTXnXoXXc56w38_070600.jpg_310x310.jpg' }] }, { title: '欧黛尔 2012新款春季真皮女鞋 超高跟防水台烫钻花纹鱼嘴单鞋A643', desp: '', url: '', rawUrl: 'http://item.taobao.com/item.htm?spm=545.66420.131756.29&id=15588132338&ali_trackid=4_10602_2-3', imgs: [{ isDefault: true, url: 'http://img03.taobaocdn.com/bao/uploaded/i3/T1ae5SXeppXXX2HtEU_014256.jpg_310x310.jpg' }] }, { title: '洛芙丝2012春新女款彩虹真皮高跟鞋防水台坡跟平底低帮单鞋子D804', desp: '', url: '', rawUrl: 'http://item.taobao.com/item.htm?spm=545.66420.131756.30&id=13903045768&ali_trackid=4_10602_1-3', imgs: [{ isDefault: true, url: 'http://img04.taobaocdn.com/bao/uploaded/i4/T1dEaTXkXeXXcwtMQ8_070550.jpg_310x310.jpg' }] }] }] }; var expired = false; var pluginString = $.toJSON(jsonData); var skinPath = 'http://localhost:1097/Template/11/skin_1/'; var skinVersion = 1; var extraData = '';
这是代码
- JScript code
/// <reference path="../../content/js/core/jquery-1.4.4.min.js" /> $(function () { var pluginData = {}; var cssText = $.strFormat('',skinPath, skinVersion); var htmlText = '<div class="skin_box">\ <div class="skin_bq"></div>\ <div class="img_box">\ </div>\ <div class="clear"></div>\ <div class="btn_list">\ <div class="up_btn up"><a href="javascript:;"></a></div>\ <div class="dn_btn dn"><a href="javascript:;"></a></div>\ </div>\ <div class="img_box3"></div>\ <div class="img_box3a">\ </div>\ </div>'; var page = { currentPage: 0, currentSize: 0, pageSize: 4, totalSize: 4, totalPage: 1 }; var imagesize = { smlImg: "_160x160.jpg", middleImg: "_170x170.jpg", biddleImg: "_310x310.jpg" }; function init() { initData(); initCss(); initHtml(); initControl(); } function initData() { pluginData = $.parseJSON(pluginString); page.totalPage = pluginData.pages[0].items.length / page.pageSize; page.totalSize = pluginData.pages[0].items.length; } function initCss() { $('head').append(cssText); } function initHtml() { $('body').prepend(htmlText); $('.skin_bq').html('版权所有:' + pluginData.shop.title); createImg(); } function initControl() { $('.img_box3').hide(); $('.img_box3a').hide(); } function createImg() { $('.img_box').html(''); var imgHtml = '<ul>'; var i = page.currentSize; if (i >= page.totalSize) { return false; } for (i; i < page.currentSize + 4; i++) { var imgurl = pluginData.pages[0].items[i].imgs[0].url; imgHtml += $.strFormat('<li class="img_lk img_dx"><a href="javascript:;" class="img_pad" rawLink="{0}"><img src="{1}" alt=""/>{2}</a></li>', pluginData.pages[0].items[i].rawUrl, imgurl.substr(0, imgurl.lastIndexOf('_')) + imagesize.smlImg, pluginData.pages[0].items[i].title); } imgHtml += '</ul>'; $('.img_box').append(imgHtml); createImg(); } function prepensePage() { $('.up').find('a').click(upClick); $('.dn').find('a').click(dnClick); if ($('.up').hasClass('up_btnt')) { $('.up').removeClass('up_btnt').addClass('up_btn'); } if ($('.dn').hasClass('dn_btnt')) { $('.dn').removeClass('dn_btnt').addClass('dn_btn'); } $('.img_pad').click(padClick); $('.img_lk').mouseover(mouseOver).mouseout(mouseOut); if (page.currentPage === 0) { $('.up').find('a').unbind('click'); $('.up').removeClass('up_btn').addClass('up_btnt'); } if (page.currentPage >= (page.totalPage - 1)) { $('.dn').find('a').unbind('click'); $('.dn').removeClass('dn_btn').addClass('dn_btnt'); } } function upClick() { page.currentPage--; page.currentSize = page.currentPage * page.pageSize; createImg(); return false; } function dnClick() { page.currentPage++; page.currentSize = page.currentPage * page.pageSize; createImg(); return false; } function padClick() { var img = $(this).find('img').attr('src'); var bigBox = $.strFormat('<a href="javascript:;" class="close_btn"></a><a href="{0}" target="_blank"><img src="{1}" alt=""/></a><span class="text_pad"></span>', $(this).attr('rawLink'), img.substr(0, img.lastIndexOf('_')) + imagesize.biddleImg); var title = $.strFormat('<a href="{0}" target="_blank">{1}</a>', $(this).attr('rawLink'), $(this).attr('innerText')); $('.img_box3').show(); $('.img_box3a').show().append(bigBox); $('.text_pad').append(title); $('.close_btn').click(closeBoxClick); return false; } function closeBoxClick() { $('.img_box3a').html('').hide(); $('.img_box3').hide(); return false; } function mouseOver() { var img = $(this).find('img').attr('src'); $(this).find('img').attr('src', img.substr(0, img.lastIndexOf('_')) + imagesize.middleImg); } function mouseOut() { var img = $(this).find('img').attr('src'); $(this).find('img').attr('src', img.substr(0, img.lastIndexOf('_')) + imagesize.smlImg); } // 执行 init(); });