zoukankan      html  css  js  c++  java
  • 淡入淡出轮播图

    用原生js写淡入淡出轮播图

    1、轮播图下边的按钮

    for(var i =0;i<aBtn.length;i++){
    aBtn[i].index = i;
    aBtn[i].onmouseover = function(){
    for(var j =0;j<aBtn.length;j++){
    aBtn[j].className = "";
    }
    this.className = "active";
    next = this.index;
    toImg()
    }
    }

    2、轮播图右边的按钮
    aDir[0].onclick = function(){
    if(next == 0){
    next = aLi.length-1;
    }else{
    next --;
    }
    toImg()
    }

    3、轮播图右边的按钮
    aDir[1].onclick = function(){
    if(next == aLi.length-1){
    next = 0;
    }else{
    next ++;
    }
    toImg()
    }

    4、当鼠标移动到轮播图上的时候,运动停止,清除定时器
    oBanner.onmouseover = function(){
    clearInterval(timer);
    }

    5、当鼠标移出轮播图的时候,运动继续
    oBanner.onmouseout = function(){
    autoPlay()
    }
    autoPlay()

    6、定义定时器,开始进行轮播
    function autoPlay(){
    timer = setInterval(function(){
    if(next == aLi.length-1){
    next = 0;
    }else{
    next ++;
    }
    toImg()
    },3000)
    }

    7、定义定时器,li通过透明度叠加来进行轮播转换
    function toImg(){
    move(aLi[iNow],{opacity:0});
    move(aLi[next],{opacity:100});
    iNow = next;
    for(var i =0;i<aBtn.length;i++){
    aBtn[i].className = ""
    }
    aBtn[next].className = "active"
    }

  • 相关阅读:
    求树的某一层的节点最多
    快排 PAT 1101
    PAT 1098
    PAt 1099
    多项式求和
    pat 1100
    getline 函数
    数字的标准写法
    线性回归
    HTTP 中状态码 302的使用场景
  • 原文地址:https://www.cnblogs.com/luxinyi/p/9533471.html
Copyright © 2011-2022 走看看