欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

渐变轮播图的实现

程序员文章站 2022-03-23 11:13:49
@[TOC]渐变轮播图实现原理简述渐变轮播图主要的实现方式就是通过改变每个要显示的li的透明度进行一个缓慢的视觉效果,代码部分在css样式上可能相对于要比其他的轮播图较详细代码解读部分html结构部分
  • img1
  • img2
  • &l...

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

简述

渐变轮播图主要的实现方式就是通过改变每个要显示的li的透明度进行一个缓慢的视觉效果,代码部分在css样式上可能相对于要比其他的轮播图较详细

代码解读部分

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