插件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. SQL提高查询效率【in、not in、between、like】等条件讲述

    在使用SQL语句查询数据库记录时,如果要查询相同的内容,有着不同的多种方法. 仍然,尽管使用多种方法可以得到相同的结果,但是,如果您使用不同的方法,在执行效益上是截然不同的.因此,我们得仔细考虑,如果 ...

  2. JavaScript--Dom间接选择器

    一.Dom间接选择器 间接查找的属性 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 n ...

  3. Vue实例的生命周期(钩子函数)

    Vue实例的生命钩子总共有10个 先上官方图: 下面时一个vue实例定义钩子函数的例子: var app=new Vue({ el:'#app', beforeCreate:function(){ c ...

  4. CSS变量试玩儿

    CSS很美妙,能够为您的页面穿上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass.LESS.Stylus(笔者建议Sass的SCSS语法),这些预处 ...

  5. [原]Android Fragment 入门介绍

    Fragment Fragment 产生,优点,用途,使用方法简介 1 Fragmeng简介 自从Android 3.0中引入fragments 的概念,根据词海的翻译可以译为:碎片.片段.其上的是为 ...

  6. 有关楼层滚动且对应楼层Nav导航高亮显示

    $(document).ready(function(e) { //定义数组,储存楼层距离顶部的高度(floorsTop) var floorsTop=[]; function floorsTopF( ...

  7. json 删除、添加对象

    1. 定义json对象    var entryJson = []; 2. 删除.添加对象 entryJson.pop();     //删除最后一个对象   entryJson.push({ //往 ...

  8. NVIDIA / Intel 核芯显卡显示 + Nvidia 计算

    今天折腾了好久intel集成显卡显示.最后好不容易才全部搞定,这里记录一下.   1. 首先在BIOS里是要打开Intel 核芯显卡的.我把它设置成了主显卡,显示器也接到核心显卡的口上. 重启后, I ...

  9. VAE(Variational Autoencoder)的原理

    Kingma, Diederik P., and Max Welling. "Auto-encoding variational bayes." arXiv preprint ar ...

  10. Hadoop 上使用C 语言编程【转】

    转自:https://www.linuxidc.com/Linux/2012-04/58991.htm 今天尝试用C语言在Hadoop上编写统计单词的程序,具体过程如下: 一.编写map和reduce ...