插件github地址:https://github.com/pomelott/slider-plug_in

使用方式:

slider plug-in

左右滑动的自适应、多样式全能插件。多次调用时只需传入最外层盒子ID即可。

1.根据html中的Dom结构引入图片。

2.引入css和js文件

3.调用pomeloSlider.doslide(obj)

sliderwidth:轮播图宽度,单位为像素,默认自适应全屏。
outer:最外层盒子ID,默认为"outer"
time:轮播的时间间隔,单位为毫秒,默认为3000
style:轮播样式:默认为"easeBothStrong",其他还有"linear","easeIn","easeOut","easeBoth"等

pomeloSlider.doslide({
sliderwidth:800,

outer:"outer",

time:3000,

style:"easeBothStrong"
});

喜欢请点击右下角推荐,转载请标明出处。

基于js的自适应、多样式轮播图插件(兼容IE8+、FF、chrome等主流浏览器)的更多相关文章

  1. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  2. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  3. 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  4. 封装一个简单的原生js焦点轮播图插件

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

  5. 原生JavaScript(js)手把手教你写轮播图插件(banner)

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  6. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  7. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天:移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. jsoncpp的安装与使用示例

    安装: 生成静态库 生成静态库: 第一步:生成目标文件: g++ -g -Wall -c json_reader.cpp json_value.cpp json_writer.cpp -I. -I.. ...

  2. (转)flask的context机制

    本文转自:https://blog.tonyseek.com/post/the-context-mechanism-of-flask/ 作者:无知的 TonySeek 注意:本文仅仅作为个人mark, ...

  3. Zephir入门教程一

    一.如何安装 zephir-安装和初体验:http://blog.csdn.net/u011142688/article/details/51619811 二.如何使用 需要切到工作目录下,也就是co ...

  4. Java获取时间,将当前时间减一年,减一天,减一个月

    在Java中操作时间的时候,需要计算某段时间开始到结束的区间日期,常用的时间工具 Date date = new Date();//获取当前时间 Calendar calendar = Calenda ...

  5. python解析minicap

    上篇知道了minicap发送图片的格式,照着官网的app.js代码,改用一个python版的来解析它,适当扩展,可以做个小工具实时显示手机屏幕. 步骤: 一.手机开启minicap服务 adb she ...

  6. jQuery1.11源码分析(2)-----Sizzle源码中的正则表达式[原创]

    看完了上篇,对Sizzle有了一个大致的了解,我们接下来就可以正式开始啃Sizzle的源码了.上来就讲matcher难度太大,先来点开胃菜,讲讲Sizzle中的各个正则表达式的作用吧(本来还想讲初始化 ...

  7. html5 canvas 多个填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. [QuickRoR]Ruby on Rails开发环境安装

    1.Setup Ruby on Rails2.Test Web App3.Create the First Web App 1.Setup Ruby on Rails1) Download rubyi ...

  9. 阿里云Linux服务器挂载数据盘

    步骤1.登录服务器2.检查磁盘信息 命令:fdisk -l3.磁盘分区 命令:fdisk /dev/xvdb 查看命令帮助 m n //新增一个分区 p //建立一个主分区 1 //设置盘符为1 回车 ...

  10. AngularJs -- 指令中使用子作用域

    下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...