• 透明度轮播框架封装注意点zIndex值不能忘记


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body,ul,ol{
    margin:0;
    padding:0;
    border: 0;
    }
    li{
    list-style: none;
    }
    #box{
    490px;
    height: 170px;
    padding: 5px;
    border:1px solid #000;

    margin:100px auto;
    position: relative;
    }
    #ad{
    490px;
    height: 170px;
    overflow: hidden;
    position: relative;
    }
    #box ul{
    2450px;
    height: 170px;

    position: absolute;
    }
    #box ul li{
    position: absolute;
    left: 0;top: 0;

    opacity: 0;
    }
    #box ul li img{ 490px;}
    #box ol{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    160px;
    height: 22px;
    }

    #box ol li{
    20px;
    height: 20px;
    float: left;
    margin-right: 8px;
    border:1px solid #ccc;

    background-color: #fff;
    text-align:center;
    line-height: 20px;

    }
    #box ol li.current{
    background-color: yellow;

    }


    #btnArr{
    490px;
    height: 40px;

    position: absolute;
    z-index: 10;
    display: none;
    left: 5px;
    top: 50%;
    margin-top: -20px;
    }
    #btnArr span{
    40px;
    height: 40px;
    position: absolute;

    font-size: 20px;
    font-family: "宋体";
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    line-height: 40px;

    }

    #right{
    right: 0;
    }

    </style>

    </head>
    <body>
    <div id="box">
    <div id="ad">
    <ul>
    <li style="opacity: 1;z-index:1"><img src="img/1.jpg" ></li>
    <li><img src="img/2.jpg" ></li>
    <li><img src="img/3.jpg" ></li>
    <li><img src="img/4.jpg" ></li>
    <li><img src="img/5.jpg" ></li>
    </ul>

    <ol>
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ol>
    </div>
    <div id="btnArr">
    <span id="left"><</span>
    <span id="right">></span>
    </div>
    </div>
    <script src="animate.js"></script>
    <script>

    var box=document.getElementById('box');
    var ad=box.children[0];
    var ul=box.getElementsByTagName('ul')[0];
    var ulliArr=ul.children;
    console.log(ulliArr);
    var ol=box.getElementsByTagName('ol')[0];
    var olLiArr=ol.children;
    var btnArr=document.getElementById('btnArr');
    var left=document.getElementById('left');
    var right=document.getElementById('right');
    var imgWidth=ad.offsetWidth;
    // 两个定时器,一个控制透明度,一个控制zIndex
    var timer=null;
    var timer1=null;

    var k=0;//计数器 控制当前图片是哪一张

    // 需求,开启两个定时器,一个控制透明度,一个控制图片的ZINDEX切换

    // 1.鼠标经过box的时候,btnArr显示,移开隐藏
    // 2.自动轮播 开启定时器,每2s k++ 封装autoStep 调用autoOPa()
    // 3.鼠标经过小方块,排他思想,显示当前
    // 4.关联索引值
    // 5.点击右侧按钮,执行autoStep()
    // 6.点击左侧按钮,k--
    // 7.鼠标经过box的时候,清楚自动轮播的定时器 timer1,移开设置


    // 1.鼠标经过box的时候,btnArr显示,移开隐藏
    box.onmouseover=function(){
    btnArr.style.display="block";
    clearInterval(timer1);//第七步
    }
    box.onmouseout=function(){
    btnArr.style.display="none";
    timer1=setInterval(autoStep,2000);//第七步
    }

    // 2.自动轮播 开启定时器,每2s k++ 封装autoStep 调用autoOPa()
    // 每2秒走一步
    function autoStep(){
    k++;
    if(k>4){
    k=0;
    }
    if(k<0){
    k=4;
    }

    // 控制小方块自增
    // 排他
    for(var i=0; i<olLiArr.length;i++){
    olLiArr[i].className="";
    ulliArr[i].style.zIndex=0;
    }

    // 注意点,当前图片的zIndex提高
    ulliArr[k].style.zIndex=1;
    animate(ulliArr[k],{opacity:100});
    // 显示当前
    olLiArr[k].className="current";
    }

    // 自动轮播
    function autoPlay(){
    if(timer1){
    clearInterval(timer1);
    }
    timer1=setInterval(autoStep,2000)
    }

    autoPlay();

    // 3.鼠标经过小方块,排他思想,显示当前
    for(var i=0; i<olLiArr.length; i++){
    olLiArr[i].onmouseover=function(){
    for(var j=0; j<olLiArr.length; j++){
    olLiArr[j].className="";
    ulliArr[j].style.zIndex=0;
    if(this==olLiArr[j]){
    olLiArr[j].className="current";
    // 4关联索引值
    k=j;
    // 这里的k代表当前是哪一张图片
    // 注意点,当前图片的zIndex提高
    ulliArr[k].style.zIndex=1;
    animate(ulliArr[k],{opacity:100});
    // 让当前图片从0到1进行透明度渐变
    }
    }
    }
    }

    // 5.点击右侧按钮
    right.onclick=function(){
    autoStep();
    }

    // 6.点击左侧按钮
    left.onclick=function(){
    k-=2;
    autoStep();
    }




    </script>
    </body>
    </html>

  • 相关阅读:
    redis概要学习
    http协议格式详解
    浅谈mysql
    linux常用命令
    Linux 程序管理
    认识与分析日志文件
    认识与学习bash
    例行任务管理
    软件安装的三大方法
    关于一些感慨
  • 原文地址:https://www.cnblogs.com/qfly/p/8818034.html
Copyright © 2020-2023  润新知