网址:http://www.dede58.com/plus/de...
<div class="MainBg">
<div class="HS10"></div>
<div class="OriginalPicBorder">
<div id="OriginalPic">
<div id="aPrev" class="CursorL" title="上一张"></div>
<div id="aNext" class="CursorR" title="下一张"></div>
{dede:productimagelist}
<p class="Hidden"><span class="SliderPicBorder FlRight"><img src="[field:imgsrc/]" alt="[field:text/]"/></span><span class="Clearer"></span></p>
{/dede:productimagelist} </div>
</div>
<div class="HS15"></div>
<div class="ThumbPicBorder"> <img src="{dede:global.cfg_cmspath/}/skin/images/arrowl.jpg" id="btnPrev" class="FlLeft"/>
<div class="pic">
<div class="jCarouselLite FlLeft">
<ul id="ThumbPic">
{dede:productimagelist}
<li rel='[field:global.autoindex/]'><img src="[field:imgsrc/]" alt="[field:text/]"/></li>
{/dede:productimagelist}
</ul>
<div class="Clearer"></div>
</div>
</div>
<img src="{dede:global.cfg_cmspath/}/skin/images/arrowr.jpg" id="btnNext" class="FlLeft"/>
<div class="Clearer"></div>
</div>
</div>
<!--组图结束-->
<script type="text/javascript">
//缩略图滚动事件
$(".jCarouselLite").jCarouselLite({
btnNext: "#btnNext",
btnPrev: "#btnPrev",
scroll: 1,
speed: 240,
circular: false,
visible: 6
});
</script>
<script type="text/javascript">
var currentImage;
var currentIndex = -1;
//显示大图(参数index从0开始计数)
function showImage(index){
//更新当前图片页码
$(".CounterCurrent").html(index + 1);
//隐藏或显示向左向右鼠标手势
var len = $('#OriginalPic img').length;
if(index == len - 1){
$("#aNext").hide();
}else{
$("#aNext").show();
}
if(index == 0){
$("#aPrev").hide();
}else{
$("#aPrev").show();
}
//显示大图
if(index < $('#OriginalPic img').length){
var indexImage = $('#OriginalPic p')[index];
//隐藏当前的图
if(currentImage){
if(currentImage != indexImage){
$(currentImage).css('z-index', 2);
$(currentImage).fadeOut(0,function(){
$(this).css({'display':'none','z-index':1})
});
}
}
//显示用户选择的图
$(indexImage).show().css({'opacity': 0.4});
$(indexImage).animate({opacity:1},{duration:200});
//更新变量
currentImage = indexImage;
currentIndex = index;
//移除并添加高亮
$('#ThumbPic img').removeClass('active');
$($('#ThumbPic img')[index]).addClass('active');
//设置向左向右鼠标手势区域的高度
//var tempHeight = $($('#OriginalPic img')[index]).height();
//$('#aPrev').height(tempHeight);
//$('#aNext').height(tempHeight);
}
}
//下一张
function ShowNext(){
var len = $('#OriginalPic img').length;
var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
showImage(next);
}
//上一张
function ShowPrep(){
var len = $('#OriginalPic img').length;
var next = currentIndex == 0 ? (len - 1) : currentIndex - 1;
showImage(next);
}
//下一张事件
$("#aNext").click(function(){
ShowNext();
if($(".active").position().left >= 144 * 5){
$("#btnNext").click();
}
});
//上一张事件
$("#aPrev").click(function(){
ShowPrep();
if($(".active").position().left <= 144 * 5){
$("#btnPrev").click();
}
});
//初始化事件
$(".OriginalPicBorder").ready(function(){
ShowNext();
//绑定缩略图点击事件
$('#ThumbPic li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count) - 0);
});
});
</script>
<div class="showContxt"> {dede:field.body/} </div>
单击上面可以是因为他自己有个透明的按钮。单击下面不生效看上去是事件没有生效,不清楚是不是插件有问题,你可以自己给他绑定一下事件
btnPrev.onclick = ()=>aPrev.click()