学习随笔 原生js实现轮播

兼容性:IE7及以上,火狐和谷歌等主流浏览器


HTML&CSS

最外面1个总容器#ad,里面放1个图片容器#list,1个按钮容器#btns,2个箭头#prev和#next;#ad相对定位,其他相对于#ad绝对定位。
所有图片都是绝对定位,会重叠在一起,默认z-index:0;给选中的图片和按钮分别设置class为selected和on,其中选中图片的z-index:1,才会出现在顶层。
JS

手动轮播:把选中图片和按钮添加相应类名selected和on,把原来选中的按钮和图片取消相应类名。需要用循环,把所有按钮都遍历一遍,并且给每个按钮都定义一个索引index值。其中,需要判断选中当前已选中的,则不操作。
自动轮播。函数nextPic用于实现下一张图片,设置一个定时器,每隔一定时间就执行一次函数nextPic。注意处理移动到最后一张和第一张
注意:鼠标移入按钮时,自动轮播应该暂停;鼠标移出按钮时,自动轮播应该继续,且给一个当前的索引,告诉自动轮播从哪里开始播。
修改代码:将第1步和第2步中代码相似的部分合并写为一个函数show()
将图片和左右箭头鼠标悬停时清除计时器,写成函数pause,将图片和左右箭头鼠标离开时重启计数器,写成函数restart
给向左箭头写一个函数prevPic,用于显示上一张图片
设置左右箭头的开始和暂停
为了实现切换时的透明度渐变效果,需要给图片设置transition属性。只设置selected的话则会出现白底渐变效果,需要给所有图片也设置默认的transition属性。但只兼容IE10及以上,因为IE9不支持transition属性
兼容IE9及以下

因为IE9不支持transition属性,尝试用js实现渐入渐出,思路如下:

写透明度变化函数
function setOpacity(elem,level){
 if(elem.filters){ //IE9及以下有这个属性
     elem.style.filter="alpha(opacity="+level+")";
 }else{
     elem.style.opacity=level/100;
 }
}
透明度变化是动态的,隔一段时间就要变化,首先想到用setInterval
function fade_In(elem){
 setOpacity(elem,0); //初始透明
 var level=0;
 setInterval(function(){
     if(level<=95){
         level+=5;
         setOpacity(elem,level);
         console.log(level);
     }
 }, 300);
}
也可以用setTimout,感觉比较绕(挺有意思的,值得深究)。先考虑用循环,注意循环内的匿名函数问题,可以用括号的方法自执行。

//淡入效果
function fadeIn(elem){
 setOpacity(elem,0); //初始透明
 for(var i=0;i<=20;i++){
     (function(){
         var level=i*5;
         //try 1
         //console.log(level); //测试用,会一次性全部依次输出,如L61
         //setOpacity(elem,level);  //如果这样写,而不用L54的setTimeout的话是无效的,会一次性地全部实现,没有动画效果。

//try 2
         /*if(level<=100){
             console.log(level);
             setInterval(setOpacity(elem,level), 300);  //每隔一定时间就执行依次函数,但这里level已经是100了。应该是每隔一段时间就变化level。另外写一个。
         }*/

//正确:
         setTimeout(function(){
             setOpacity(elem,level)
         }, i*300);   //于是用setTimeout:i=0,间隔为0时,level=0;i=1,间隔为300时,level=5,依次……从而实现渐变。
     })(i);  //传入参数i,函数立即执行,会依次执行21次
 }
}
注意渐出的函数,容易写错,如下:

//淡出效果1:错误,实际是淡入效果
function fade_Out(elem){
 for(var i=20;i>=0;i--){
     (function(){
         var level=i*5;  //level从100到0
         setTimeout(function(){
             setOpacity(elem,level);
             //console.log(level); //测试用,这里却是从0到100
         }, i*300);
         //因为i=0时,即间隔时间为0,level=0;i=20,即间隔时间为6000,level=100。虽然for循环是从大到小,但setTimeout执行却是按照间隔时间的顺序的。所以实际上是淡入效果。
     })(i);
 }
}
正确的如下:

//淡出效果2:正确
function fadeOut(elem){
 for(var i=0;i<=20;i++){
     (function(){
         var level=100-i*5; //level从100到0
         setTimeout(function(){
             setOpacity(elem,level)
         }, i*300);
     })(i);
 }
}
在show函数里添加渐入和渐出,第一轮轮播切换时会出现第5张图闪一下再切换到目标图片,后面几轮轮播就不会了———因为CSS中没有设置默认透明度为0,选中透明度为1,切换的时候原来选中的一下子就变到底层了,所以会有第5张闪现。

P.S.由于本例中尝试用setTimeout写渐出时的出错,引发的问题如:循环中的匿名函数问题,setTimeout的多次执行 

时间: 2024-11-08 23:14:37

学习随笔 原生js实现轮播的相关文章

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

使用原生js实现轮播图效果

知乎原文 我的博客 微信公众号这几天在逛网站的时候,发现很多网站都有轮播图这个效果,所以我就仿照小米的官网用原生js写了一个轮播图效果,希望大家喜欢.这是我发布在github上的最后实现的效果:https://heternally.github.io/... 下面我简单跟大家说一下我实现该效果的过程,如果有什么错误的地方,欢迎大家说出来,以方便大家互相学习. 我相信前面简单的html+css大家应该都会,我这里就不说了,简单给大家展示一下代码: HTML部分 <div id="wrap&q

手把手原生js简单轮播图

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

原生js封装轮播图

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比叫好理解,其轮播图只是一个简单的效果,缺点没有写动画效果看起来比较生硬,优点简单好学,容易理解,非常实用 轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要 HTML代码 <div id="mlBox"> <div id=&q

原生js实现轮播图

很多网站上都有轮播图,使用起来也比较炫酷,但找到一个系统的介绍却很难,这里做一个简单的介绍. 原理:将一些列的图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一: 建立html基本布局,如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <

原生js实现轮播图原理

轮播图的原理1.图片移动实现原理:利用浮动将所有所有照片依次排成一行,给这一长串图片添加一个父级的遮罩,每次只显示一张图,其余的都隐藏起来.对图片添加绝对定位,通过控制left属性,实现照片的移动. 2.图片移动动画原理:从a位置移动到b位置,需要先计算两点之间的差值,通过差值和时间间隔,计算出每次移动的步长,通过添加定时器,每次移动相同的步长,实现动画效果. 3.图片定位停止原理:每一张照片都有相同的宽度,每张照片都有一个绝对的定位数值,通过检测定每次移动后,照片当前位置和需要到达位置之间的距

简洁原生js实现轮播图

html: <div class="comiis_wrapad" id="slideContainer"> <div id="frameHlicAe" class="frame cl"> <div class="temp"></div> <div class="block"> <div class="cl&quo