轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播)。本篇文章的主要目的是分享封装插件的思路。

轮播图我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式。

首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏,

容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left值的变化来实现图片轮播的效果

所以写好的css样式和html代码如下

  *{margin:; padding:; text-decoration: none;}
#container{height: 400px; width: 600px; overflow: hidden; position:relative;}
#list{height:400px; width:4200px; position: absolute; z-index:;}
img{display:inline-block; float:left;}
#buttons{position: absolute; width:100px; height:10px; z-index:; bottom:25px; left: 250px;}
#buttons span{float: left; border:1px solid #fff; width:10px; height:10px; border-radius:50%; margin-right:5px; color:#333; cursor:pointer;}
#buttons .on { background: orangered;}
.arrow{cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index:; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
<div id="container">
<div id="list">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" class="arrow" id="prev">&lt;</a>
<a href="javascript:;" class="arrow" id="next">&gt;</a>
</div>

 接下来要开始封装插件了!!!

封装插件的基本思想就是:把要写的代码,封闭到一个自执行函数里面,防止跟外部变量冲突,然后将这个构造函数暴露给window对象,方便我们在外部去访问这个构造函数。

第一:先写好基础的js结构

;(function(window, document){ // 使用一个立即执行函数,把window和document对象传进去
function Carousel(options){ // 创建构造函数,采用大写驼峰写法的函数是构造函数,跟普通方法区分开来 }
Carousel.prototype = { // 重写原型 }
window.Carousel = Carousel; // 把构造函数暴露出去,全局可调用 })(window, document)

第二步:写好默认配置,以及完善构造函数,代码成这样

(function(window, document){
let defaultSetting = { // 默认设置
"width":"500",
"height":"300"
}
function Carousel(options){ //
var self = this; // 在构造函数中使用,this指向新创建的对象Carousel{},常把this保存在self里,因为在不同层级,this的指向可能不同
self.setting = Object.assign(defaultSetting, options); //合并参数,把默认设置和new对象的时候传进来的options进行合并,options里面设置了的项会覆盖默认设置的
self.container = document.querySelector(self.setting.container); // 获取最外层的容器
self.list = document.querySelector("#list"); // 获取包裹img的列表
self.sliderItems = self.list.getElementsByTagName('img'); // 获取图片集合
self.buttons = document.querySelector("#buttons").getElementsByTagName('span'); // 获取左右按钮集合
self.prev = document.querySelector("#prev"); // 前进按钮
self.next = document.querySelector("#next"); // 后退按钮
self.index = 1; // 焦点index初始值是1,指示第一张图片
}
Carousel.prototype = { }
window.Carousel = Carousel; })(window, document)

第三步,给原型添加方法,这样new出来的对象就默认可以使用这些方法了,完善后的代码长这样

(function(window, document){
let defaultSetting = {
"width":"500",
"height":"300"
}
function Carousel(options){ //
var self = this;
self.setting = Object.assign(defaultSetting, options);
self.container = document.querySelector(self.setting.container);
self.list = document.querySelector("#list");
self.sliderItems = self.list.getElementsByTagName('img');
self.buttons = document.querySelector("#buttons").getElementsByTagName('span');
self.prev = document.querySelector("#prev");
self.next = document.querySelector("#next");
self.index = 1;
self.prev.onclick = function(){ // 点击按钮调用rotate方法切换到上一张
self.rotate('left');
} self.next.onclick = function(){ // 点击按钮调用rotate方法切换到下一张
self.rotate('right');
} }
Carousel.prototype = {
rotate: function(dir){ // 定义rotate方法
let self = this;
let newLeft; // 变化后的left值
let selfLeft = self.list.style.left; // 原left值
let sliderWidth = parseInt(self.setting.width); // 可见视口宽度,这里也是一张图片宽度
let len = self.sliderItems.length; // 图片总张数
let totalWidth = len * sliderWidth if(dir === 'left'){ // 点击左按钮,往前一张
if(!selfLeft){
newLeft = selfLeft + sliderWidth; }else{
newLeft = parseInt(selfLeft) + sliderWidth
self.index--;
}
if(newLeft > 0){ // 如果是第一张图片往前切换,则切换到最后一张
newLeft = -totalWidth + sliderWidth;
self.index = len;
}
self.list.style.left = newLeft + 'px' // 改变left值
showButtons();
}
if(dir === 'right'){ // 点击右按钮,往后一张, 则left值增加一个负sliderWidth
if(!selfLeft){
newLeft = selfLeft - sliderWidth
self.index++;
}else{
newLeft = parseInt(selfLeft) - sliderWidth
self.index++;
}
if(newLeft <= -totalWidth){ //
newLeft = 0;
self.index = 1;
}
self.list.style.left = newLeft + 'px' // 改变left值
showButtons();
} function showButtons(){ // rotate方法里面又定义了showButtons方法
for(let i=0; i< self.buttons.length; i++){
if(self.buttons[i].className === 'on'){
self.buttons[i].className = ''; // 清除原圆点高亮状态
break;
}
}
self.buttons[self.index-1].className ='on';
}
}
}
window.Carousel = Carousel; // 暴露出去,供全局对象使用 })(window, document)

最后一步就是利用构造函数创建对象了,

var Carousel = new Carousel({
container:"#container",
width:"600",
height:"400"
});

然后我们就能看到上面说的效果。

原生js封装轮播图插件就完成了,插件不是非常的完善,主要是为了分享自己一步步封装插件的过程,欢迎留言交流,晚点会放上github链接,可以下载源码~

封装一个简单的原生js焦点轮播图插件的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  5. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  6. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  7. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

  8. 2、原生js实现轮播图特效

    很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...

  9. 第54天:原生js实现轮播图效果

    一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...

随机推荐

  1. 立几个flag

    有时候会心血来潮想学一点东西,然后搞别的东西的时候就慢慢忘了.. 这里做个备忘录: 树分块/树上莫队 广义后缀自动机(大概这辈子都不会去学了) 带花树(如果我能学的动那个线代的随机算法就放弃这个) 模 ...

  2. python创建MySQL多实例-1

    python创建MySQL多实例-1 前言 什么是多实例 多实例就是允许在同一台机器上创建另外一套不同配置文件的数据库,他们之间是相互独立的,主要有以下特点, 1> 不能同时使用一个端口 2&g ...

  3. 【LTE基础知识】SGLTE, SVLTE, CSFB, VoLTE【转】

    本文转载自:https://blog.csdn.net/henryghx/article/details/18416405 4G网络下实现语音通话功能的技术共有三种——VoLTE.SGLTE(GSM ...

  4. Linq 对List的一些操作

    代码: public class Person { public int ID { get; set; } public string Name { get; set; } public int Ag ...

  5. [shiro] - 加入rememberMe功能

    shiro不加入rememberMe没事,一加入就出错. RememberMeAuthenticationToken : public interface RememberMeAuthenticati ...

  6. 【Android实验】 UI设计-ListView

    目录 实验目的 实验要求 实验内容 实现效果 实验代码 实验总结 实验目的 学习使用ListView 学习使用menu 实验要求 实现一个列表,其中显示班级学号姓名,提供添加功能,如需要删去某一项,长 ...

  7. codevs 1191 数轴染色 区间更新加延迟标记

    题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后剩余黑色点的个数. ...

  8. Node.js结合Selenium做Web自动化测试

    发现腾讯课堂上有个node.js结合Selenium做Web自动化测试的教学视频, 听来感觉不错,一来老师讲的还不错,二来node.js这门语言会越来越热,学会总没什么坏处,三来发现CukeTest这 ...

  9. HDU 6124 Euler theorem

    Euler theorem 思路:找规律 a       余数                  个数 1       0 1                     2 2       0 2   ...

  10. C#一套简单的单例系统

    单例基类 public class CSingletonBase<TYPE> { public static TYPE Singleton { get { return m_singlet ...