基于Jquery的banner轮播插件,简单粗暴
新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的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轮播插件,简单粗暴的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery补充,基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- jQuery图片无缝轮播插件;
图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...
- 基于jquery的图片轮播 (IE8以上)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Jquery.KinSlideshow图片轮播插件
KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome* ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
随机推荐
- 学习Java设计模式的10条建议
设计模式在整个Java的学习路线图中扮演着承上启下的作用. 在整个软件生命周期中,唯一不变的就是变化.设计模式就是要在软件设计.编码中对现有问题的一种总结,并从中寻求应对变化的策略. 自己初次接触设计 ...
- Ewebeditor最新漏洞及漏洞大全
Ewebeditor最新漏洞及漏洞大全[收集] 来源:转载作者:佚名时间:2009-06-03 00:04:26 下面文章收集转载于网络:) 算是比較全面的ewebeditor编辑器的漏洞收集,如今的 ...
- C 循环链表
循环链表的定义:将单链表中最后一个数据元素的next指针指向第一个元素 在循环链表中可以定义一个“当前”指针,这个指针通常称为游标,可以通过这个游标来遍历链表中的所有元素. 1) 普通插入元素(和单链 ...
- 正则匹配ab不匹配aab
var a = "aababaabababababaab"; a.replace(/(^|[^a])(ab)+/g, "$1"); var a = " ...
- 实例源码--Android高德地图实例源码
下载源码 技术要点: 1.高德地图 API的使用 2.定位 ,查询路线,公交查询等地图相关技术 3.源码带有非常详 细的中文注释 ...... 详细介绍: 1. 高德地图API的使用 本套实例采 ...
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- Objective-C中系统宏的用法总结
先说一下本文中会提到的内容:##,__VA_ARGS__, __FILE__, __LINE__ , __FUNCTION__等 宏变量: 先举一个例子,会用到上面这些宏: #define mypri ...
- 一致性Hash算法及使用场景
一.问题产生背景 在使用分布式对数据进行存储时,经常会碰到需要新增节点来满足业务快速增长的需求.然而在新增节点时,如果处理不善会导致所有的数据重新分片,这对于某些系统来说可能是灾难性的. 那 ...
- 【Objective-C】2.自定义构造方法和description方法
1.Student.h 1 #import <Foundation/Foundation.h> 2 3 @interface Student : NSObject { 4 int _age ...
- SQL*PLUS中批量执行SQL语句
SQL*PLUS中批量执行SQL语句 今天由于工作的需要,要在CMD中批量执行大量的SQL语句,对于Oracle学习还处在入门阶段的我,只能硬着头皮到处去寻找资料(主要是网络资料,也包括自己的电子书) ...