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 相关文章推荐
使用jsonp完美解决跨域问题
Nov 27 Javascript
node.js中的require使用详解
Dec 15 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
浅析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
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
js实现点击烟花特效
2020/10/14 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
HTML的form表单和django的form表单
2019/07/25 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python 画函数曲线示例
2019/12/04 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python实现京东抢秒杀功能
2021/01/25 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
课程设计心得体会
2013/12/28 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
看雷锋电影观后感
2015/06/10 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
公司晚会主持词
2019/04/17 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS