zoukankan      html  css  js  c++  java
  • 探索javascript----我对渐变轮播图的理解

     对于一个没有编程基础的人来说,我时常希望能有人告诉我,当我们看到一个效果的时候,该怎样有条理地分析出它的行为,而我自己有必要加强这方面的 自省,对于一个轮播图我是这样看的,自动播放必然带有一个定时器,而播放某帧(若假设为渐变为实),渐变就必然也有一个定时器。

        1:人通过鼠标控制一个轮播的自动播放autoPlay。

               a.当鼠标移入轮播图范围的时候,轮播图停止自动播放,反之开始自动播放:

                 oBox.onmouseover=function(){

                  clearInterval(play);

                 }

                 oBox.onmouseout=function(){

                 autoPlay();  

                 }

               b.当鼠标移到某按钮时,就播放该帧:(这里是这样思考的:必然按钮和图之间有一种联系来互相控制,它就是参数)

                 for(var i=0;i<aNum.length;i++){

                 aNum[i].index=i;//为每一个按钮添加一个“号码牌”属性;

                 show(this.index)

                 }

        2:自动播放控制着每帧的播放show():

               function autoPlay(){

               play=setInterval(

                 index++;

                 index>=aNum.length && (index=0);//当播放到最后一帧,2秒后又++变为第aNum.length帧(空),就让它重头播放

                 show(index);

                 },2000)

                autoPlay();

        3:每帧的播放show(),每一次都先让所有帧都透明度变为0,也标记特定按钮,然后让特定帧实度渐增至opacity=1;

               function show(a){  //需要播放来自自动播放产生的、鼠标移至按钮产生的特定帧,靠参数控制

               for(var i=0;i<aLi.length;i++) aLi[i].style.opacity="";//未做兼容

               for(var i=0;i<aNum.length;i++){

                aNum[i].className="";

                }

                aNum[a].className="current";

                var alpha=0;//最好在函数头声明

                timer=setInterval(function(){

                alpha++2;

                alpha>100 && (alpha=100);

                aLi[a].style.opacity =""+alpha/100;

                alpha==100 && clearInterval(timer);

                },20)

                }

  • 相关阅读:
    Hibernate关系映射(一) 基于外键的单向一对一
    Hibernate开发环境搭建
    Java创建和读取Json
    Json 简易教程
    jQuery Validate验证框架详解
    asp.net Core 3.1配置log4net
    HTTP 错误 500.21
    SQL中数据库 无法访问,并且数据库的属性中 使用人数、大小、可用空间全是不可用
    What is a CGFloat?
    Swift中的CGPoint ,CGSize 、CGRect、CGFloat
  • 原文地址:https://www.cnblogs.com/webkey-wzy/p/4048812.html
Copyright © 2011-2022 走看看