新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播。

先挂地址https://github.com/DEATHBUG/banner_tool

第一个放进去的项目,相当有纪念意义,大神轻虐。

下面放传参参数

$(".banner").Banner({
child:'li', //包含图片的父级标签,默认li
time:'3000', //轮播间隔时间
direction:"right", //轮播方向,目前仅支持left和right
choose:'false', //是否支持触摸小点的轮播触摸事件,默认false。
chooseId:'id', //小点外部父级标签ID。仅限choose开关打开。
chooseActive:'red', //支持小点的选中状态classname。仅限choose开关打开。
preId:'pre', //向前翻页的按钮id
nextId:'next' //向后翻页的按钮id
});

  

目前仅支持控制轮播的时间间隔,轮播方向为左右,
choose为前面触点标记,若为true则为打开,需加载如下触点父级标签ID,以及用户点击的样式变化class;
如果添加前后翻页按钮,则添加参数前后翻页的按钮ID;

<div id="dian">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

  若添加触摸选页标记,传递ID即可;

我是个web程序猿,享受代码,乐于前端,正在摸索前进的道路上。

如果发现有什么问题,希望能在下面评论或者及时反馈给qq 2109796331,非常感激您的上帝视角。请不吝赐教!!

基于Jquery的banner轮播插件,简单粗暴的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. jQuery补充,基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  3. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  5. jQuery图片无缝轮播插件;

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  6. 基于jquery的图片轮播 (IE8以上)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Jquery.KinSlideshow图片轮播插件

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome* ...

  8. jquery实现导航图轮播

    版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...

  9. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

随机推荐

  1. Codeforces Round #200 (Div. 1)D. Water Tree dfs序

    D. Water Tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343/problem/ ...

  2. 在iOS中怎样创建可展开的Table View?(下)

    接上篇:在iOS中怎样创建可展开的Table View?(上) 展开和合拢 我猜这部分可能是你最期望的了,因为本次教程的目标将会在在部分实现.第一次我们设法让顶层的cell,在它们点击的时候展开或者合 ...

  3. android129 zhihuibeijing 聊天机器人

    上屏幕界面activity_main.xml: 语音识别界面 <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  4. [设计模式1]--单例模式(SINGLETON)

    搞笑解释: 俺有6个漂亮的老婆,她们的老公都是我,我就是我们家里的老公Sigleton,她们只要说道“老公”,都是指的同一个人,那就是我 定义: 单例模式确保某一个类只有一个实例,而且自行实例化并向整 ...

  5. mysql使用心得

    SET FOREIGN_KEY_CHECKS=0; -- ------------------------------ Table structure for `staff`-- ---------- ...

  6. C#_delegate - Pair<T> 静态绑定

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. iOS开发几年了,你清楚OC中的这些东西么1

    前言 几年前笔者是使用Objective-C进行iOS开发, 不过在两年前Apple发布swift的时候,就开始了swift的学习, 在swift1.2发布后就正式并且一直都使用了swift进行iOS ...

  8. 用java程序模拟网站的登录以及文件批量上传

    import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.List; ...

  9. Android之HTTP网络通信--GET传递

    说明 在做一个项目的时候难免会与服务器打交道,这里我就做一个小的Demo来简单的说明一下HTTP的使用,我这里使用的是图灵的接口,你也可以登陆www.tuling123.com进行申请.我使用的是上面 ...

  10. linux内核结构

    Linux内核子系统: 分别是:进程调度(SCHED).进程间通信(IPC).虚拟文件系统(VFS).内存管理(MM).网络通信(NET) 进程调度与内存管理之间的关系:这两个子系统互相依赖.在多道程 ...