Question

dedecms内容页一张大图下有多张小图片可以切换是怎么实现的？这段代码如何修改？【和图片一样的效果】

<section class="caseDetail"> <article class="leftpic" style="position:relative"><a href="javascript:" class="btn_scroll_left" id="btn_scroll_left" title="上一张"></a><img src="" alt="{dede:field.title/}" id="caseBigPic" width="780" height="460"><a href="javascript:" class="btn_scroll_right" id="btn_scroll_right" title="下一张"></a></article> <section class="rightCase"> <script type="text/javascript"> var tempXGT = "{dede:field name='imgurls' alt='kuvai.com'}[field:imgsrc/]+++++++++{/dede:field}/kuvai_style/images/nopic.jpg";var tempXGTImg = tempXGT.split('+++++++++'); var tempXGT2 = "";var tempXGTImg2 = tempXGT2.split('+++++++++'); </script> <section class="casepicBox slidePic"> <h2>效果图 (<span class="this_count" id="this_count1">1</span>/<span id="count1"></span>)<a href="javascript:" class="btn_Left" title="向左翻页"></a><a href="javascript:" class="btn_Right" title="向右翻页"></a></h2> <div class="casepicUl_box"> <ul class="casepicList"> <script type="text/javascript"> for(var i=0;i<tempXGTImg.length;i++){ if(i%3==0&&i>0){ document.write('<div class="cls"></div></ul><ul class="casepicList">') } document.write('<li><a href="javascript:"><img src="'+tempXGTImg[i].replace('thumb.jpg','middle.jpg')+'" width="93" height="75"></a></li>'); } </script> </ul> <div class="cls"></div> </div> </section> <div class="casepicBoxLine"></div> <a href="http://localhost/zhx/jia/"> <h3 style="font-size: 24px; padding: 6px 0px 2px 0px" class="green">大家都在看</h3> </a> <ul class="newlist"> {dede:arclist row='7' titlelen='40' orderby ='pubdate' typeid='30' orderby='click' } <li><img src="../../kuvai_style/images/xiaotubiao.png" width="6" height="8" /> <span></span> <a href="[field:arcurl/]">[field:title/]</a></li> {/dede:arclist} </ul> </section> <div class="casepicBoxLine"></div></section>【这段代码不能翻到下一页，我需要的是翻页】

Answer 1

使用AD Gallery制作,AD Gallery是一个带缩略图导航浏览，可设置照片标题和备注说明信息的jQuery相册插件。该插件提供了许多可配置的参数和方法，具有很强的定制功能。

假设你把这个商品的N张图片保存在一个独立字段pics，页面需要显示这个效果的地方加以下代码
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list" id="thumbImgUl">

</ul>
</div>
</div>
</div>

<div id="allimg" class="hidden">{dede:field.pics /}</div>

<SCRIPT language=javascript >
function showpic(id)
{
var content = $(id);
var showimg = $("thumbImgUl");
var img = content.getElementsByTagName("IMG");
var imageStr = "";
for(var i=0;i<img.length;i++){
imageStr+= '<li><a href="'+img[i].src+'" ><img src="'+img[i].src+'" alt="'+img[i].alt+'" longdesc="'+img[i].src+'" class="image0" width="70" height="70" border=0></a></li>';
}
if(imageStr!='')
{
showimg.innerHTML = imageStr;
void(document.close())
}
}
showpic("allimg");
$(function(){
$('.ad-gallery').adGallery();
});
</SCRIPT>

追问

是不是在网站上装jQuery相册插件？我是一个菜鸟，还真是不懂，你的回答我再百度上看到过的，具体怎么操作能具体点吗？

追答

是的

追问

装jQuery相册插件具体方法？你有这个插件能分享下吗？响应式的

追答

百度上有大把的，搜索一下就行了