您所在的位置:小祥子 » CMS学院 » 织梦 » 正文

dedecms调用图集缩略图并带点击放大效果

时间:2015-01-23 编辑:佚名 来源:互联网

这种效果比较适合企业类网站展示产品使用,当一个产品有多张图片的时候,我们需要在内容页展示缩略图,然后用户点击缩略图则切换出大图,用图集来完成这样的效果,感觉更加方便一些。效果如下图:
JS_op>

 
 



效果的实现步骤如下:

首先在图集内容页模板中需要调用缩略图的地方引入如下代码

<div class="clearfix bpi z" id="bpi">{dede:field name='imgurls'}
 
<div><img src='[field:imgsrc/]' alt='[field:alttext /]' border='0' /></div>
 
{/dede:field}
 
</div>
 
<div class="clearfix spi" id="spi"></div>
 
<script>
 
ci();
 
</script>

然后在页面引入如下JS代码:

function $id(id){ id = document.getElementById(id); return id;} /// 首先定义一个获取id的函数
 

function cg(idbase, count, current) {
 
for(i = 0;i < count;i++) {
 
$id(idbase + '_' + i).style.display = 'none';
 
$id('t' + idbase + '_' + i).className = '';}
 
$id(idbase + '_' + current).style.display = '';
 
$id('t' + idbase + '_' + current).className = 'ontype';
 
}  /// 这里是通过点击切换图片的函数
 

function ci(){
 
var id = $id('bpi');
 
var idv = $id('bpi').getElementsByTagName('div');
 
var idt = $id('spi');
 
var idi = $id('bpi').getElementsByTagName('img');
 
for (i=0;i<idi.length;i++){
 
idv[i].id='c_'+i;
 
    idt.innerHTML+='<a href="javascript:cg(\'c\','+idi.length+','+i+')" id="tc_'+i+'"><img alt="'+idi[i].alt+'" src="'+idi[i].src+'"/></a>';}}
 
////最后这个ci() 则是生成小缩略图的函数;

通过一段简单的js代码,生成小缩略图并且能够在点击小图的时候自动切换到相应的大图.
代码简单.实用性非常强;当然也适用于产品页模板或者其他任何可以调用图片的模板!