点击轮播图片，链接跳转错误

<#if (InfoList?size > 0)>
    <#list InfoList as newsInfo>
        <li class="slider-li1" style="position:absolute ;left: 0;top: 0;">
            <a href="${url}?newsId=${newsInfo.newsVo.id}" target="_blank">
                <img src="${newsInfo.coverUrl!}" alt="${newsInfo.newsVo.title?xhtml}"/>
            </a>
            <div class="">
                <div class="describe">
                    <p>${newsInfo.title?xhtml}</p>
                    <p>${newsInfo.contentText?xhtml}</p>
                </div>
            </div>
        </li>
    </#list>

在.ftl的freemarker模板文件里写一个遍历，并将slider-li1添加到slider.js轮播插件中去

banner.js的部分文件是这么写的。

$(function () {
    var $box = $(".slider-canvas1"),
    $li = $(".slider-canvas1 li"), //轮播图
    $on = $(".slider-icon-wrap1 span"), //圆形按钮
    length = $on.length,
    index = length-1,
    ....

    for (var j = 0; j < index; j++) {
      $li.eq(j).css("visibility","hidden");
    }



  ...
  //自动轮播
  auto();

  function auto() {
    timer = setTimeout(function () {
      change(3);
      auto();
    }, 6000);
  }

  
  //鼠标放到轮播图时清除定时器
  $box[0].onmouseenter = function () {
    clearTimeout(timer);
  };
  //鼠标移开时继续执行定时器
  $box[0].onmouseleave = function () {
    auto();
  };

  //轮播图的切换
  function change(bool, i) { //bool值为1、2、3，分别表示：上一张、圆形按钮、下一张/自动轮播
    /*debugger*/
    if (index === i) return; //自己点自己不处理
    if (new Date() - clickTime <= 100) return; //两次点击的间隔不能小于1.8秒
    clickTime = new Date(); //时间更新
    //淡出

    //图片隐藏文字到上方
   /* $li.eq(index).animate({
      opacity: 0
    }, 0);*/
    $li.eq(index).css("visibility","hidden");

    $on.eq(index).removeClass("on");
    //序号的改变
    switch (bool) {
      case 1: //上一张
        index--;
        index = index < 0 && length - 1 || index;
        break;
      case 2: //圆形按钮
        index = i;
        break;
      case 3: //下一张、自动轮播
        index++;
        index= index%length; //轮播到了最后一个就从0开始
        break;
    }
    $on.eq(index).addClass("on");

    //淡入
    /*$li.eq(index).animate({
      opacity: 1
    }, 0);*/
    $li.eq(index).css("visibility","visible");
  }
});

---

bug1：点击轮播图片跳转错误

原因：opacity: 0;是占据空间可以点击的，这样url就会被最后一个<li>中的url覆盖，导致无论当前轮播的是哪张图片，链接的都是最后一张图片的地址

修改方案见标红

---

bug2:图片轮播不正常

原因：最开始auto自动轮播没有触发之前，所有的<li>都是不带visibility属性的，在触发之后，才将<li>逐个添加visibility。

因此，在所有的图片都触发了自动轮播（添加了visibility）之前，此时点击轮播按钮会出现轮播图片显示异常（没有显示正确的图片），因为此时有的<li>没有visibility 。这种<li>的优先级比样式为visibility：visiable（正确的图片li）的优先级高，会 覆盖它，从而出现图片显示错误问题。

解决方案：紫色代码

在auto（）触发之前将除当前轮播图外的所有<li>都加上"visibility","hidden"样式