js实现无缝轮播图插件封装

前言:页面中轮播图,对于一个前端开发者来说,是最基本的技能,不论是的商城网站,还是企业站,轮播图已经成为不可缺少的一个模块,而常见的轮播图不外乎两种,一种是渐隐渐现轮播图,一种是无缝轮播图。网上关于轮播图的件也有很多,但是用人家的代码总会出现各种各样的bug,我们修改bug往往要耗费很多时间,而且有些插件的效果还不符合我们的需求,那么我们该如何封装一个自己的轮播插件呢?这就是我们今天的任务,封装轮播插件。

1、特效离不开合理的页面布局,所以我们首先需要进行页面布局:

HTML代码:

<div class="container mycontainer">
  <div class="wrapper">
    <div class="slide">
      <img src="image/jd01.jpg" alt="">
    </div>
    <div class="slide">
      <img src="image/jd02.jpg" alt="">
    </div>
    <div class="slide">
      <img src="image/jd03.jpg" alt="">
    </div>
    <div class="slide">
      <img src="image/jd04.jpg" alt="">
    </div>
  </div>
  <!-- 分页器 -->
  <ul class="pagination"></ul>
  <!-- 导航按钮 -->
  <div class="button-pre"></div>
  <div class="button-next"></div>
</div>

2、在HTML页面中引入css样式文件:css样式文件代码如下:

CSS代码:

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.container {
  margin: 200px auto;
  position: relative;
  overflow: hidden;
}

.slide {
  float: left;
}

img {
  display: block;
}

.pagination {
  width: 160px;
  position: absolute;
  bottom: 30px;
  margin-left: -80px;
  left: 50%;
}

.pagination li {
  float: left;
  width: 20px;
  height: 20px;
  background-color: blue;
  margin: 0 10px;
  border-radius: 50%;
}

.button-pre,
.button-next {
  width: 22px;
  height: 40px;
  position: absolute;
  top: 50%;
  margin-top: -20px;
}

.button-pre {
  left: 30px;
  background: url('../image/left.png') no-repeat center center;
}

.button-next {
  right: 30px;
  background: url('../image/right.png') no-repeat center center;
}

.pagination .active {
  background-color: red;
}
.mycontainer{
  width: 590px;
  height: 470px;
}

页面布局完成后,接下来就是javaScript代码,绑定事件;

在绑定事件之前,我们首先要知道无缝轮播图的原理和一些技术关键点。
轮播图的原理:最外层视野区域固定大小且的溢出隐藏,通过动态控制包裹图片的父元素的marginLeft值实现轮播;
关键点1:最外层的盒子container固定大小,是我们的视野区域,需要设置溢出隐藏overflow:hidden;
关键点2:所有轮播的图片使用一个共同的父元素wrapper包裹起来;
关键点3:动态克隆第一张图片所在的元素silde,然后添加到最后;
关键点4:父元素wrapper的宽度为图片个数(原始图片个数+1,因为克隆多添加了一张图片)乘以单独一张图片的宽度;
关键点5:实现无缝轮播的判断条件,marginleft样式重置时机;
关键点6:动态生成分页器按钮,并设置分页器pagination样式;
关键点7:实现自动播放和清除播放,使用计时器setInterval()和 clearInterval()
关键点8:实现代码复用,借助面向对象的开发——构造函数+原型对象+jQuery插件封装机制实现

3、关键点梳理完之后,就可以开始javascript代码:通过自执行函数实现;需要在HTML页面引入JS文件,JS文件代码如下:

JS代码:

;(function($){
  // 默认设置
  var defaults = {
    speed:1000,
    interval:2000
  }
  function Banner(ele,options){
    // 获取元素对象
    this.element = $(ele);
    // 合并设置项
    this.options = $.extend({},defaults,options);
    // 获取包裹图片的父元素
    this.wrapper = this.element.children().first();
    // 获取要克隆的元素
    this.firstChild = this.wrapper.find('.slide:first');
    // 获取一张图片宽度
    this.Width = this.firstChild.width();
    // 记录图片下标
    this.n = 0;
    // 获取图片个数
    this.len = this.wrapper.find('.slide').length;
    // 获取切换导航按钮
    this.prev = this.element.find('.button-pre');
    this.next = this.element.find('.button-next');
    // 获取分页器
    this.pagination = this.element.find('.pagination');
    // 计时器
    this.timer = null;
  }
  // 初始化
  Banner.prototype.init = function(){
    var self = this;
    (function () {
      // 克隆第一张图片并添加到元素的最后边,设置包裹图片父盒子的宽度
      self.wrapper.append(self.firstChild.clone(true));
      self.wrapper.css({ width:self.Width * (self.len + 1)});
      // 生成对应的分页器按钮
      for(var i = 0; i < self.len; i++){
        $('<li></li>').appendTo(self.pagination);
      }
      // 动态设置分页器的样式
      self.pagination.find('li:first').addClass('active');
      var btnWidth = self.pagination.find('li:first').outerWidth(true) * self.len;
      self.pagination.css({width:btnWidth,marginLeft:-btnWidth / 2})
    })()
    // 调用所有绑定的事件
    this.nextClick();
    this.preClick();
    this.btnClick();
    this.autoPlay();
    this.clearPlay(this.element);
  }
  // 切换下一张图片事件
  Banner.prototype.nextClick = function(){
    var self = this;
    this.next.click(function(){
      self.moveNext();
    })
  }
  // 切换图片,同时也为实现自动播放
  Banner.prototype.moveNext = function() {
    this.n++;
    // 判断重置时机和重置样式
    if (this.n > this.len ) {
      this.n = 1;
      this.wrapper.css({ marginLeft: 0 });
    }
    this.changeBtn(this.n > 3 ? 0 : this.n);
    this.wrapper.stop(true,true).animate({ marginLeft: -this.Width * this.n }, this.options.speed)
  }

  // 点击切换上一张图片
  Banner.prototype.preClick = function(){
    var self = this;
    this.prev.click(function () {
      self.n--;
      if (self.n < 0) {
        self.n = self.len - 1;
        self.wrapper.css({ marginLeft: -(self.len) * self.Width });
      }
      self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
      self.wrapper.animate({ marginLeft: -self.Width * self.n }, self.options.speed)
    })
  }
  // 点击分页器切换图片
  Banner.prototype.btnClick = function(){
    var self = this;
     this.pagination.find('li').click(function () {
      var index = $(this).index();
      self.n = index;
      self.changeBtn(index);
      self.wrapper.animate({ marginLeft: -self.Width * index }, self.options.speed)
    })
  }
  // 动态修改分页器按钮的样式
  Banner.prototype.changeBtn = function(index){
    this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
  }
  // 自动轮播
  Banner.prototype.autoPlay = function(){
    var self = this;
    /* 计时器中调用函数是,函数中的this 指向 window, 所以需要使用self.timer = setInterval(function(){
       self.moveNext();
     },2000);
     不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 */
    self.timer = setInterval(function(){
      self.moveNext();
    },self.options.interval);
  }
  // 清除自动播放
  Banner.prototype.clearPlay = function(ele){
    var self = this;
    ele.mouseenter(function(){
      clearInterval(self.timer)
    }).mouseleave(function(){
      // 再次开启自动轮播
      self.timer = setInterval(function(){
        self.moveNext();
      },self.options.interval);
    })
  }
  // jQuery插件实现
$.fn.myBanner = function(params){
    // params 是自定义的配置项
    var banner = new Banner(this,params);
    banner.init();
    // 如果需要链式调用
    return this;
  }
})(jQuery)

最后在HTML页面中进行初始化,最好放到HTML结束标签之前的位置,因为我们封装的插件是依赖于jQuery的,因此首先引入jQuery文件,然后在引入我们自己封装的js文件;最后就是进行初始化设置:

<script>
  $(function(){
     $('.mycontainer').myBanner({
      // speed:图片切换速度
      // interval:图片切换的时间间隔
       speed:500,
       interval:3000
     });
  })

</script>

到此为止,我们已经实现了轮播插件的封装并且实现了复用,只需要动态的绑定不同的元素mycontainer(可以动态修改成自己的元素名字)即可实现复用。

4、如果需要修改容器的大小和图片的大小,可以直接覆盖样式即可:

.mycontainer2{
  width: 300px;
  height:200px;
}
.mycontainer2 img{
  width: 300px;
  height:200px;
}

5、完成。恭喜你,你的轮播插件可以正常切换了

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

时间: 2020-07-28

js实现无缝轮播图特效

用原生js实现无缝轮播图,供大家参考,具体内容如下 index.js: var config = { imgWidth:380,//图片尺寸 dotWidth:8,//小圆点尺寸 doms:{ divImgs:document.querySelector('.imgs'), divDots:document.querySelector('.circle'), divDirection:document.querySelector('.direction'), divContainer:docum

js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

原生JS实现无缝轮播图片

本文实例为大家分享了JS实现无缝轮播图的具体代码,供大家参考,具体内容如下 运动插件 function animove(obj,distance,speed,callback) { //调用的变量 目标距离 速度 回调函数 clearInterval(obj.timer); obj.timer = setInterval(function () { let step = (distance - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(s

JS轮播图实现简单代码

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

js实现轮播图特效

本文实例为大家分享了js实现轮播图特效的具体代码,供大家参考,具体内容如下 只需要修改图片的src即可 html: <body> <div id="rollImgBox"> <div class="photos clearfix"> <!--轮播图里面首位多放最后一张与第一张图片,以便顺畅平滑切换--> <div class="move"><img src="img/ti

js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

js代码实现轮播图

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 又从头到尾把轮播图研究了一遍,感觉理解更深刻了. 就怕自己搞不懂,分析了各个步骤的思路,为啥用,怎么用. 总算搞清楚了. 话不多说,干货奉上. 效果图: //1,左右按钮初始隐藏 鼠标进入box 按钮显示 鼠标离开box 按钮隐藏 //获取元素 var box = document.getElementById('box'); var leftbtn = document.getElementById('leftbtn');

JS实现纵向轮播图(初级版)

本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度达到效果. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.list=[

js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

Vue中如何实现轮播图的示例代码

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"

原生js实现轮播图

本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下 CSS: <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body { background: #eee; } #Bigbox { width: 720p

原生JS实现轮播图效果

学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的,也实现了无缝切换,还有一点问题就是没有加上图片切换的时候的延迟了. html: <div id="container"> <div id="list" style="left: -600px;"> <img src="../image/1.jpg" alt=&

js实现轮播图的两种方式(构造函数、面向对象)

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 1.构造函数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:500px; height:360px; margin:1

使用Require.js封装原生js轮播图的实现代码

index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he

原生JS实现旋转轮播图+文字内容切换效果【附源码】

废话不多说,直接上图看效果: 需求: 点击左右按钮实现切换用户图片与信息: 原理: 点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字: 步骤: 1.让页面加载出所有盒子的样式: 2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转): 3.书写函数: 操作函数:左按钮:删除第一个,添加到最后一个: 右按钮:删除最后一个,添加到第一个: 4.定义变量,根据对应变量切换

原生JS无缝滑动轮播图

本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul,div,img{ margin: 0; padding