JS实现高亮效果的跳转

JS实现高亮效果的跳转

开发工具与关键技术：Adobe Dreamweaver CC 2017，js。

作者：易金亮

撰写时间：2019.01.18

接下来我们使用JS来实现轮播中页码按钮的高亮效果跳转，首先来看一下我做出来的效果，如下：

具体实现代码如下：

    <!---------切换图片的按钮-------->
    <ul class="anniuBtn" id="anniuBtn">
     <li ind="1" class="on">1</li>
     <li ind="2">2</li>
     <li ind="3">3</li>
     <li ind="4">4</li>
      ...

先通过html给它设置一排页码按钮，给其中一个设置一个高亮类“on”.再通过css给它设置一些样式，具体什么样式就看个人喜欢和实际场景了，我设置的效果就如上图所示。

//设置轮播页码高亮效果
function anniuBtn(){
 var anniuBtn =document.getElementById("anniuBtn").getElementsByTagName("li");
 for(var i=0;i<anniuBtn.length;i++){
  if(anniuBtn[i].className==="on"){
   anniuBtn[i].className="";
    break;
  }
 }
 anniuBtn[ind-1].className = "on";
}

然后再通过JS来设置高亮效果的跳转，如上代码，给它一个方法，然后将这个方法引入一下就可以实现按钮高亮效果随轮播图片一起跳转了。

如果再通过以上截图的代码给那个高亮类设置伪类的话，就能实现鼠标移入高亮类缩小的效果了，如第一张图所示，那个高亮类页码按钮就明显比其他按钮小。