探索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)

}

时间: 2024-08-01 13:19:20

探索javascript----我对渐变轮播图的理解的相关文章

简要分析javascript的选项卡和轮播图

选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i<input.length;i++){ input[i].index=i //让浏览器解析HTML文档时,保存每一个input的索引 input[i].onclick=function(){ for(var j=0;j<div.length;j++){ //所有的div为隐藏 div[j].style

JavaScript实现移动端轮播图效果

功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个index=0用来存图片索引: 添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index就加一: 通过transform(变形)属性和transition(过渡)属性实现图片的轮播. 1 var index = 0; 2 var timer = setInterval(function(

JavaScript 最基本的轮播图实现

html 与css 没来得及写注释 ,以下为源码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 600px; height: 400px; margin: auto; position: relative; } img

Jquery 轮播图简易框架

=====================基本结构===================== <div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="picture.jpg" alt=&

photoSlider-原生js移动开发轮播图、相册滑动插件

详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /><script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8&q

photoSlider-html5原生js移动开发轮播图-相册滑动插件

简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8">

3d轮播图的效果实现

最近工程比较松,所以自己研究了一下3d轮播图的实现原理,其实说白了也不是很难就是在x,y,z轴上的平移和整个平面的旋转变换达到的效果, 下面是实现代码 html部分 <div class="stage"> <div class="contains"> <div style="transform: rotateY(0deg) translateZ(400px);">关于我</div> <div

浅谈轮播图(原生JavaScript实现)

现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满足自己要求的轮播图,同时也对我们更好的使用其他插件有帮助.当然,最重要的是扎实我们的JavaScript基本功! 切入正题. 轮播,顾名思义,就是图片的循环"播放".播放可以自动(定时器)也可以手动(按钮).轮播的精要其实是切换,切换可以是上下左右不同方向的移动来实现切换,移动可以匀速小步

原生javascript轮播图!

<style> .box { width: 500px; height: 275px; position: relative; margin: 100px auto; } a { text-decoration: none; font-size: 28px; text-align: center; line-height: 80px; display: inline-block; width: 40px; color:#fff; background:rgba(0,0,0,0.6); posi