一个基于原生js的焦点图轮播插件，兼容IE7以上（IE6未测试），源码如下：
一个基于原生js的焦点图轮播插件，兼容IE7以上（IE6未测试），源码如下：
该插件基于一个精简工具库Ajuan.js，该工具库由原生js编写，是一个类似jQuery.js库。但相比jQuery而言，它十分的精简（代码加上注释不到300行）。
而且该插件也完全适用于jQuery工具库，也就是说，Ajuan.js库 jQuery.js以及Zepto.js库，引入一个即可运行该插件。
插件轮播功能：分为三个风格
1.默认（display）
2.自定义（custom）
3.滚动（roll）（该风格还在完成中，预计几天后发布）
ps:因为轮播的实现比较简单，这次分享主要是分享一下怎么样利用js去完整的写一个插件，所以源码我特意加了注释；更希望有大神能够指出代码不足之处，谢谢大家！！！
插件源码如下：
* Created by 2144 on .
* ajuanCarousel-1.0.js版本
* author：ChenZhigang
* email：zhigang.
* personal：
* github: /Woshiajuana
* company：
图片轮播，兼容各大IE浏览器，原生js编写（在使用_a库的情况下）
* 特别说明：
_a对象，全名是Ajuan，是本人写的一个仿zepto的精简js库，如果在引用了该库的前提下，
会优先使用该库，如果没有该库，则会使用jquery，没有jquery则会使用zepto库。
* ajuanCarousel-1.0.js库：
github: /Woshiajuana/Carousel
* Ajuan.js库：
github: /Woshiajuana/Ajuan
;(function (win,doc,_a,undefined) {
//定义变量
var options, //用于接收用户传递的参数变量
clickEvent, //事件变量，存储事件函数
//默认参数
DEFAULT = {
click:'click',
fatherEleName: 'ul',
//父元素标签名，默认ul元素，可以是class：'.class'，也可以使id: '.id'
sonEleName: 'li',
//子元素标签名，默认li元素
//轮播初始值，默认0
speed : 4000,
//轮播频率，默认4000，单位ms
isAuto: true,
//轮播是否自动滚动，可选(true | false)，默认为true
isLoop: true,
//是否连续滚动，可选(true | false)，默认为true
mode:'display',
//轮播图的风格，可选(display | custom | roll)，默认display，custom自定义，roll滚动
//风格选择自定义的时候，该参数可用
active:'active'
//风格样式默认class名为active
//风格选择滚动的时候，该参数可用
during:400,
//轮播速度，默认400，单位ms
isAxisX:true
//滚动方向，X轴
//按钮配置信息
prevEleName: '',
//元素标签名，可以是class：'.class'，也可以使id: '.id'
nextEleName: ''
//元素标签名，可以是class：'.class'，也可以使id: '.id'
//索引配置信息
triEleName:'',
//元素标签名，可以是class：'.class'，也可以使id: '.id'
sonEleTagName:'i',
//元素标签名
sonEleClass:'',
//元素标签的样式
active:'active'
//元素标签高亮样式
isAllSonForEle:true
//所有的元素参数名称是否属于主体DOM的子元素，默认为true
//构造函数
function AjuanCarousel(ele,opt){
//接收用户传递的参数变量，并且防止用户不传递参数报错
options = opt || {};
this.boxEle = _a(ele);
this.click = options.click || DEFAULT.
this.fatherEleName = options.fatherEleName || DEFAULT.fatherEleN
//父元素标签名，默认ul元素，可以是class：'.class'，也可以使id: '.id'
this.sonEleName = options.sonEleName || DEFAULT.sonEleN
//子元素标签名，默认li元素
this.index = options.index || DEFAULT.
//轮播初始值
this.speed = options.speed || DEFAULT.
//轮播频率
this.isAuto = options.isAuto || DEFAULT.isA
//是否自动滚动
this.isLoop = options.isLoop || DEFAULT.isL
//是否连续滚动
this.btn = options.
//按钮参数配置
this.trigger = options.
//索引参数配置
this.mode = options.mode || DEFAULT.
//轮播风格
this.custom = options.custom || DEFAULT.
//轮播风格为自定义，参数配置
this.roll = options.roll || DEFAULT.
//轮播风格为滚动，参数配置
this.isAllSonForEle = options.isAllSonForEle || DEFAULT.isAllSonForE
//所有的元素参数名称是否属于主体DOM的子元素，默认为true
this.callback = options.
//每滚动一屏，回调函数
AjuanCarousel.prototype = {
//初始化方法
init: function () {
achieveData(this);
//获取数据元素
onEvent(this);
//绑定事件
isModFun(this);
//判断轮播的风格
autoRun(this);
//自动轮播
//解除事件绑定的方法
unEvent: function () {
unEvent(this);
//获取信息
function achieveData(that){
//获取信息
that.fatherEle = that.boxEle.find(that.fatherEleName);
//获取轮播图父级元素对象
that.sonEleArr = that.fatherEle.find(that.sonEleName);
//获取轮播图元素对象数组
that.length = that.sonEleArr.
//获取轮播图的总个数
//判断是否有索引
if(that.trigger && that.trigger.triEleName){
//获取索引元素名称，如果未传递该参数，则使用默认元素
var tagName = that.trigger.sonEleTagName || DEFAULT.trigger.sonEleTagN
//获取索引父级元素对象
that.triEle = that.isAllSonForEle ? that.boxEle.find(that.trigger.triEleName) : _a(that.trigger.triEleName);
//获取索引选中的样式，如果未传递该参数，则使用默认样式
that.triActive = that.trigger.active || DEFAULT.trigger.
//获取索引对象数组
that.triSonEleArr = that.triEle.find( tagName );
//判断页面上是否存有该对象
if(!that.triSonEleArr.length)
createTriggerSonEle(that,tagName);
//没有索引则去创建
//判断是否有按钮
if(that.btn){
if(that.btn.prevEleName)
that.prevEle = that.isAllSonForEle ? that.boxEle.find(that.btn.prevEleName) : _a(that.btn.prevEleName);
if(that.btn.nextEleName)
that.nextEle = that.isAllSonForEle ? that.boxEle.find(that.btn.nextEleName) : _a(that.btn.nextEleName);
//创建索引对象
function createTriggerSonEle(that,tagName){
var str = '',
className = that.trigger.sonEleClass || '';
//给索引元素添加样式
//循环添加索引元素
for(var i = 0; i & that. i++){
if(i === that.index)
str += '&'+ tagName +' class="'+ className +' '+ that.triActive +'"&&/'+ tagName +'&';
str += '&'+ tagName +' class="'+ className +'"&&/'+ tagName +'&';
//添加到索引容器中
that.triEle.html(str);
//重新获取一次索引元素
that.triSonEleArr = that.triEle.find(tagName);
//操作元素
function operateEle(that){
//判断风格
function isModFun(that){
//根据风格参数，判断轮播风格，再把滚动的函数赋予对应的方法
switch (that.mode){
case 'display':
that.run = runByD
case 'custom':
that.run = runByC
case 'roll':
that.run = runByR
//自动轮播
function autoRun(that){
if(!that.isAuto)
that.temp = setInterval(function () {
that.index++;
that.run && that.run(that);
},that.speed)
//轮播一，display风格
function runByDisplay(that){
//判断当前页面和总数页面
if(that.index &= that.length) that.index = 0;
if(that.index & 0) that.index = that.length -1;
//遍历页面
that.sonEleArr.each(function (index, item) {
var b = index == that.
item.style.display = b ? 'block' : 'none';
//判断是否有索引容器
if(that.trigger) {
_a(that.triSonEleArr[index]).addClass(that.triActive);
_a(that.triSonEleArr[index]).removeClass(that.triActive);
//回调函数
that.callback && that.callback();
//轮播二，custom风格
function runByCustom(that){
//判断当前页面和总数页面
if(that.index &= that.length) that.index = 0;
if(that.index & 0) that.index = that.length -1;
var css = that.custom.
//遍历页面
that.sonEleArr.each(function (index, item) {
var b = index == that.
_a(item).addClass(css);
_a(item).removeClass(css);
//判断是否有索引容器
if(that.trigger) {
_a(that.triSonEleArr[index]).addClass(that.triActive);
_a(that.triSonEleArr[index]).removeClass(that.triActive);
//回调函数
that.callback && that.callback();
//轮播三，滚动风格
function runByRoll(that){
//上一张点击事件
function prevRunFun(that){
//清除当前自动滚动
clearInterval(that.temp);
//当前值减一
that.index--;
//图片滚动
that.run(that);
//调用自动滚动
autoRun(that);
//下一张点击事件
function nextRunFun(that){
//清除当前自动滚动
clearInterval(that.temp);
//当前值加一
that.index++;
//图片滚动
that.run(that);
//调用自动滚动
autoRun(that);
//索引点击事件
function triRunFun(that,target){
//清除当前自动滚动
clearInterval(that.temp);
//判断是哪一页
that.triSonEleArr.each(function (index, item) {
if(item == target){
that.index =
//图片滚动
that.run(that);
//调用自动滚动
autoRun(that);
//绑定事件的方法
function onEvent(that){
clickEvent = function (event) {
//获取事件event与目标target
var event = event || win.event,
target = event.target || event.srcE
//事件委托机制
//上一张按钮点击事件
if(that.prevEle && target === that.prevEle[0]){
//调用上一张的方法
prevRunFun(that);
//下一张按钮点击事件
if(that.nextEle && target === that.nextEle[0]){
//调用下一张的方法
nextRunFun(that);
//索引点击事件
if(that.triEle && target.parentNode === that.triEle[0] &&
((that.trigger.sonEleTagName && target.nodeName.toLocaleLowerCase() == that.trigger.sonEleTagName) ||
(target.nodeName.toLocaleLowerCase() == DEFAULT.trigger.sonEleTagName))){
triRunFun(that,target);
_a(doc.body).on(that.click, clickEvent);
//解除事件绑定的方法
function unEvent(that){
if(clickEvent) _a(doc.body).unbind(that.click,clickEvent);
//判断是否为amd，并且把AjuanCarousel暴露出去
if(typeof define === 'function' && define.amd){
define('AjuanCarousel',[],function(){return AjuanCarousel});
// 绑定AjuanCarousel
_a.fn.AjuanCarousel = function(options){
var list = [];
this.each(function(i, me){
list.push(new AjuanCarousel(me, options).init());
})(window,document,window.Ajuan || window.jQuery || window.Zepto);
插件示例与源代码下载：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Web前端工程师
十万经验值，为了养我们家小姣燕呀......
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2