JavaScript实现图片轮播组件代码示例


Posted in Javascript onNovember 22, 2016

本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面:

效果:
JavaScript实现图片轮播组件代码示例

  • 自动循环播放图片,下方有按钮可以切换到对应图片。
  • 添加一个动画来实现图片切换。
  • 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片。
  • 鼠标移开图片区域时,从当前位置继续轮播。
  • 提供一个接口,可以设置轮播方向,是否循环,间隔时间。

对HTML、CSS的要求:

<div class="carousel-box">
  <div class="carousel">
    <ul class="clearfix" >
      <li><img src="img/carousel01.jpg" alt=""></li>
      <li><img src="img/carousel02.jpg" alt=""></li>
      <li><img src="img/carousel03.jpg" alt=""></li>
      <li><img src="img/carousel04.jpg" alt=""></li>
      <li><img src="img/carousel05.jpg" alt=""></li>
      <li><img src="img/carousel06.jpg" alt=""></li>
    </ul>
  </div>
</div>
  • 必须是两个盒子嵌套,最里面的盒子需要有一个ul,图片需要被包含在li里。
  • 可以更改类名,同时将css文件中的相应类名替换即可。配置组件时传入正确的DOM元素即可。
  • 不限制图片宽度和数量,在css文件中更改数值即可。
/*需要更改的值*/
.carousel img{ 
  width: 600px;
  height: 400px;
}
.carousel,
.carousel-box {
  width: 600px; /*单张图片宽度*/
  height: 400px; /*单张图片高度*/
}
.carousel ul{
  width: 3600px; /*单张图片宽度x图片数量*/
}

原理:

将所有图片横向排列,最外层容器和包裹容器设置overflow:hidden。最外层容器用于按钮和箭头的定位。利用包裹容器的scrollLeft属性控制显示哪张图片。

思路:

想要实现这些功能,应该有以下一些方法:

1.图片切换函数。接受一个参数,表示滚动方向。调用缓动函数切换图片。调用切换按钮图标函数点亮相应的按钮。

2.缓动函数。

3.点亮按钮函数。

4.初始化函数。用于绑定事件,创建按钮和箭头,初始化最初位置。

5.创建箭头函数。

6.创建按钮函数。

7.开始轮播函数。

8.轮播函数。

9.停止函数。用于停止轮播。

还有一些公用方法:$():选择DOM元素。addClass(ele,"className"):给元素添加类名。removeClass(ele,"className")移除元素的类名。$.add(ele,"type",fun):给一个DOM节点绑定事件。getCSS(ele,"prop"):获取元素相应属性的值。$.delegateTag("selector","tagName","type",fun):事件代理。

实现:

假设有6张图片,每张图片宽度为600px。按照功能的独立性来完成:

1.缓动函数  liner

缓动函数的作用是一点一点的改变目标元素的属性值,直到达到目标值。使用它的元素可能是水平轮播的图片,也可能是垂直轮播的图片,也可能是一个想从页面左端到达页面右端的小盒子。所以它应该接收四个参数(目标元素,要改变的属性值,目标值,移动次数)。

liner=function(ele,prop,next,num){
  var speed=(next-ele[prop])/num,
    i=0;
  (function(){
    ele[prop]+=speed;
    i++;
    if (i<num) {
      setTimeout(arguments.callee,30);
    }
  })();  
},

2.点亮按钮函数  light

点亮按钮本质上就是给按钮添加一个active类,熄灭按钮就是给按钮移除active类。

那么如何知道当前按钮是哪一个呢?

最简单的方法是直接获取,所以可以给每个按钮添加一个index属性,当需要点亮按钮时,将要点亮的按钮的index传给这个函数即可。

那么如何知道要熄灭的按钮是哪一个呢?

最简单的方法也是直接获取,所以可以在作用域链末端添加一个变量active,记住当前亮着的按钮,这个函数直接将他熄灭就可以了。

light=function(index){
  removeClass(active,"active");
  active=$(this.wrapSelec+" "+"[index="+index+"]");
  addClass(active,"active");
}

3.图片切换函数  go

需要计算出下一个scrollLeft的值:

如果是向左移动的话,scrollLeft应该-600,如果已经是0,就切换为3000.所以是ele.scrollLeft===0?width*(len-1):ele.scrollLeft-width;

如果是向右移动的话,scrollLeft应该+600,即0——>600,600——>1200,...,3000——>0。这里可以像上面那样用判断,也可以用一个公式next=(cur+distance)%(distance*num)。即(ele.scrollLeft+width)%(width*len)

需要获得下一个要被点亮的按钮的index:

和计算scrollLeft的思路一样,往左移动:index===0? len-1:index-1; 往右移动:(index+1)%len

go=function(dire){
  var index=active.getAttribute("index")-0,
    nextIndex,
    nextPosition;
  if (dire==="next") {
    nextIndex=(index+1)%len;
    nextPosition=(ele.scrollLeft+width)%(width*len);
  }else{
    nextIndex=index===0? len-1:index-1,
    nextPosition=ele.scrollLeft===0?width*len:ele.scrollLeft-width;
  }
  light(nextIndex);
  animate.liner(ele,"scrollLeft",nextPosition);  
}

其中的len(图片总数)、width(图片宽度)、ele(包裹容器)也会被其他函数访问,所以也添加到作用域链末端。

len=ele.getElementsByTagName("img").length

width=parseInt(getCSS(ele.getElementsByTagName("img")[0],"width");

ele=$(eleSelec),eleSelec是包裹容器的selector,比如.carousel

4.创建箭头函数 createArrow

创建一个向左的箭头,绑定事件处理函数,用于向左移动。创建一个向右的箭头,绑定事件处理函数,用于向右移动。

createArrow=function(){
  var prev=document.createElement("div"),
    next=document.createElement("div");
  prev.appendChild(document.createTextNode("<"));
  next.appendChild(document.createTextNode(">"));
  prev.className="arrow prev";
  next.className="arrow next";  
  container.appendChild(prev);
  container.appendChild(next);
  addClass(container,"hide");
  $.add(next,"click",function(){
    go("next");
  });
  $.add(prev,"click",function(){
    go("prev");
  });
}

container代表最外层容器,也会被其他函数访问,所以也添加到作用域链末端。

container=$(wrapSelec),wrapSelec是最外层容器的selector,比如.carousel-box

5.创建按钮函数 createBtn

给每个按钮添加一个index用于点亮和熄灭,给按钮组添加一个类名用于设置样式和获取它:

createBtn=function(){
  var div=document.createElement("div"),
    btns='';
  for(var i=0;i<len;i++){
    btns+='<a href="#" index="'+i+'"></a>';
  }
  div.innerHTML=btns;
  addClass(div,"carousel-btn");
  container.appendChild(div);
}

6.轮播函数

根据要求(顺时针、逆时针)判断要调用go("prev")还是go("next")。

如果要求循环,则再次调用自己。如果不循环,则在轮播一轮后停止。

所以这里需要一个变量来判断方向,一个变量来判断是否循环,一个变量来计数。

所以又有四个变量被加到作用域链末端。direction、loop、count、begin用于清除定时器。

circle=function(){
  count++;
  if (loop||count<len) {
    if (direction==="forward") {
      go("next");
    }else{
      go("prev");
    }
  }
  begin=setTimeout(arguments.callee,t);
}

7.停止函数 stop

stop=function(){
  clearTimeout(begin);
}

8.初始化函数 init

如果是第一次使用轮播,则创建按钮和箭头,并给按钮绑定click事件处理程序(获取点击的按扭index点亮它,切换到相应图片),然后根据顺时针或逆时针来展示相应的图片和按钮。

所以这里又需要有一个变量加在作用域链末端,用于表示是否已经初始化。

init=function(){
  createBtn();
  createArrow();
  $.delegateTag(wrapSelec+" "+".carousel-btn","a","click",function(e,target){
    $.prevent(e);
    light(target.getAttribute("index"));
    animate.liner(ele,"scrollLeft",target.getAttribute("index")*width);
  });
  $.add(container,"mouseenter",function(){
    stop();
    removeClass(container,"hide");
  });
  $.add(container,"mouseleave",function(){
    addClass(container,"hide");
    begin=setTimeout(circle,t); 
  });if (direction==="forward") {
    light(0);
  }else{
    light(len-1);
    ele.scrollLeft=width*(len-1);
  }
  haveStart=true;
}

9.开始轮播函数 start

这个函数当做接口,用于控制轮播方向,间隔时间,和是否循环。计数器归零。

因为可能重复的开始轮播,所以每次开始之前都需要清除定时器。

start=function(dir,th,lo){
  stop();
  count=0;
  direction=dir;
  t=th*1000;
  loop=lo;
  if (!haveStart) {
    init();
  }
  begin=setTimeout(circle,t);
}

到这里,所有需要用到的函数已经写完了,如果把这些函数和那些需要的变量扔到一个函数里,把外层容器盒包裹容器的类名或ID传给它,这个函数返回一个包含start和stop方法的对象,这个组件就可以使用了。

但是有一个问题,这个函数只有一个,也就是说,一个页面只能有一个轮播实例。所以,如果想要一个页面能有两个轮播实例都用这个组件的话,就不能把它们扔到一个函数里。那么就只能放到对象里。每个对象有自己的变量,他们共用一组方法。

那么,这些变量就不能直接访问了,需要通过对象的属性访问,即this。

这时候就会出现问题,this是会指向调用它的那个环境,所以当那些变量在事件处理程序中,或是在定时器中被访问的时候,就不能用this,而是要创建一个闭包。

即,在能获取到this时,将this赋值给一个变量,然后在事件处理程序或是定时器中访问这个变量,就会获取到正确的对象。

以init函数为例来改装:

carouselProto.init=function(){
  var that=this;
  this.createBtn();
  this.createArrow();
  $.delegateTag(this.wrapSelec+" "+".carousel-btn","a","click",function(e,target){
    $.prevent(e);
    that.light(target.getAttribute("index"));
    animate.liner(that.ele,"scrollLeft",target.getAttribute("index")*that.width);
  });
  $.add(this.container,"mouseenter",function(){
    that.stop();
    removeClass(that.container,"hide");
  });
  $.add(this.container,"mouseleave",function(){
    addClass(that.container,"hide");
    that.begin=setTimeout(function(){
      that.circle();
    },that.t); 
  });if (this.direction==="forward") {
    this.light(0);
  }else{
    this.light(this.len-1);
    this.ele.scrollLeft=this.width*(this.len-1);
  }
  this.haveStart=true;
};

这样改装完之后,就可以创建实例了,每个实例都会有自己的属性用于记录状态,他们都共用原型中的方法。

如果采用原型继承的方式的话,可以创建一个对象作为实例的原型对象,然后创建一个函数来生产实例:

var carouselProto={};

//把上面那些方法给这个对象
carouselProto.light=...
carouselProto.go=...
carouselProto.stop=...

//创建实例对象函数
var carousel=function(eleSelec,wrapSelec){
  var that=Object.create(carouselProto);
  that.wrapSelec=wrapSelec;
  that.ele=$(eleSelec);
  that.container=$(wrapSelec);
  that.len=that.ele.getElementsByTagName("img").length;
  that.width=parseInt(getCSS(that.ele.getElementsByTagName("img")[0],"width"));
  return that;
}

//创建实例,使用组件
var carousel1=carousel(".carousel",".carousel-box");
   carousel1.start("forward",3,true);
var carousel2=carousel(".carousel2",".carousel-box2");
   carousel2.start("backward",2,true);

性能优化:

1.当点击的按钮刚好是当前被点亮的按钮时,依然会调用一次light和animate.liner。所以可以添加一个判断语句,如果点击的按钮刚好是正确的,就不要执行下面的了。

$.delegateTag(this.wrapSelec+" "+".carousel-btn","a","click",function(e,target){
  $.prevent(e);
  var index=target.getAttribute("index");
  if (index===that.active.getAttribute("index")) {
    return
  }
  that.light(index);
  animate.liner(that.ele,"scrollLeft",target.getAttribute("index")*that.width);
});

2.当图片切换的时候,缓动动画正在执行。如果在缓动动画还没执行完时就点击按钮或者箭头,就会进入下一次动画,于是就会出现混乱,图片错位。性能也会受到影响。为了防止这种情况发生,可以使用一个变量,用于记录缓动动画是否正在执行,没有执行的话点击按钮或箭头才会执行函数。

liner=function(ele,prop,next){
  var speed=(next-ele[prop])/10,
    i=0;
  ele.animating=true;
  (function(){
    ele[prop]+=speed;
    i++;
    if (i<10) {
      setTimeout(arguments.callee,60);
    }else{
      ele.animating=false;
    }
  })();  
}
if (!this.ele.animating) {
  this.light(nextIndex);
    animate.liner(this.ele,"scrollLeft",nextPosition);
}

源码:源码下载demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript定时变换图片实例代码
Mar 17 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
javascript获取元素的计算样式
May 24 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 #Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 #Javascript
原生JS查找元素的方法(推荐)
Nov 22 #Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 #Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 #Javascript
javascript入门之window对象【新手必看】
Nov 22 #Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
jQuery登陆判断简单实现代码
2013/04/21 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python获取从命令行输入数字的方法
2015/04/29 Python
python实现报表自动化详解
2017/11/16 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
资源环境与城市管理专业推荐信
2013/11/30 职场文书
应届大学生求职信
2013/12/01 职场文书
工作决心书范文
2014/03/11 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
借款民事起诉状范文
2015/05/19 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
15个值得收藏的JavaScript函数
2021/09/15 Javascript