@[TOC]渐变轮播图实现原理

简述

代码解读部分

html结构部分

<div class="box">   
        <ul id="boxUl">
            <li>img1</li>
            <li>img2</li>
            <li>img3</li>
            <li>img4</li>
            <li>img5</li>
        </ul>
        <div class="prev" id="prev">prev</div>
        <div class="next" id="next">next</div>
        <ol id="boxOl">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>

获取需要用到的元素和声明相关的变量

var boxUl = document.getElementById("boxUl")
var boxOl = document.getElementById("boxOl")
var lis = boxUl.children
var ol_lis=boxOl.children
var prev = document.getElementById("prev")
var next = document.getElementById("next")
var index = 0

开始操作上下按钮的事件

//注册点击事件
//下一张按钮
next.onclick = function(){
  	 // 当我点击这个按钮的时候，使之前的li的样式还原
  	 ol_lis[index].style.backgroundColor = "hotpink"
  	 lis[index].style.opacity = 0
  	 //开始变化到下一图
 	  index++
  	 //条件判断当前的li的下标不会大于最后一个li的下标
  	 index = index > lis.length-1 ? 0 : index  
 	  //使当前的li显示
 	  lis[index].style.opacity=1
 	  //相对应的ol下的li也高亮显示
  	  ol_lis[index].style.backgroundColor = "yellow"
}
//上一张按钮
prev.onclick = function(){
      ol_lis[index].style.backgroundColor = "hotpink"
      lis[index].style.opacity = 0
      index--    
      // 条件判断当前的li的下标不会小于于第一个li的下标
      index = index < 0 ? lis.length-1 : index     
      lis[index].style.opacity=1
      ol_lis[index].style.backgroundColor = "yellow"
}

处理上下面一一对应的图标事件

//遍历所有的ol_lis[k]
for(var k=0; k < ol_lis.length; k++){
    // 为ol下的每一个li绑定点击事件
    l_lis[k].onclick = function (){
            //再次遍历ol下的每一个li
            for(var a=0; a < ol_lis.length; a++){
                	// 当ol下的li不高亮显示时，使ul下的每一个li的透明度为零
                	lis[a].style.opacity = 0
                	//使每一个ol下的li不高亮显示
                	ol_lis[a].style.backgroundColor = "hotpink"
             }
             // 使当前ol下的li高亮显示
             this.style.backgroundColor = "yellow"
             // 将当前ol下的li与ul下的li关联起来
             index = this.innerText-1
             // 在相互关联下，ol下的li高亮显示那么ul下的li也要对应的表现出来
             lis[index].style.opacity = 1
            }
        }

本文地址：https://blog.csdn.net/weixin_45990047/article/details/109234676