轮播图左右切换按钮给的上一张下一张 点空白会动,点左右按键不会动

新手上路,请多包涵


网址: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>
阅读 1.5k
1 个回答

image.png

单击上面可以是因为他自己有个透明的按钮。单击下面不生效看上去是事件没有生效,不清楚是不是插件有问题,你可以自己给他绑定一下事件

btnPrev.onclick = ()=>aPrev.click()

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题