jQuery补充,基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>bxslider介绍</title>
<!--引入bxslider样式文件-->
<link rel="stylesheet" href="bxslider/jquery.bxslider.min.css">
</head>
<body>
<!--普通轮播图-->
<ul class="bxslider">
<li><img src="http://placehold.it/350x150&text=FooBar1"/></li>
<li><img src="http://placehold.it/350x150&text=FooBar2"/></li>
<li><img src="http://placehold.it/350x150&text=FooBar3"/></li>
</ul>
<!--横向旋转木马轮播-->
<div class="slider1">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>
<!--纵向旋转木马轮播-->
<div class="slider8">
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
</div>
<!--引入jquery文件-->
<script src="jquery/jquery.min.js"></script>
<!--引入bxslider里的js-->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script src="ceshi.js"></script>
</body>
</html>
js
/**
* Created by admin on 2017/5/2.
*/
$(function () {
//<!--普通轮播图-->
$('.bxslider').bxSlider({auto: true, autoControls: true}); //<!--横向旋转木马轮播-->
$('.slider1').bxSlider({auto: true, slideWidth: 200, minSlides: 2, maxSlides: 3, slideMargin: 10}); //<!--纵向旋转木马轮播-->
$('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
官方网站:http://bxslider.com/
jQuery补充,基于jQuery的bxslider轮播器插件的更多相关文章
- swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要
奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- vue-awesome-swipe 基于vue使用的轮播组件 使用(改)
npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swi ...
- jQyery实现轮播器
看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直 ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
随机推荐
- NSURLConnection经常使用的代理方法
NSURLConnection的代理Protocol定义有三类:NSURLConnectionDelegate.NSURLConnectionDataDelegate和NSURLConnectionD ...
- 从CM刷机过程和原理分析Android系统结构
前面101篇文章都是分析Android系统源代码,似乎不够接地气. 假设能让Android系统源代码在真实设备上跑跑看效果,那该多好.这不就是传说中的刷ROM吗?刷ROM这个话题是老罗曾经一直避免谈的 ...
- AA MME设备内部错误
adobe audition 找不到所支持的音频设备 这是3.0的错误! 上面是cs6的错误的图 主要原因是以前安装过,没有注册表没有清理干净 解决方案: https://jing ...
- DBA 需要知道N种对数据库性能的监控SQL语句
--DBA 需要知道N种对数据库性能的监控SQL语句 -- IO问题的SQL内部分析 下面的DMV查询可以来检查当前所有的等待累积值. Select wait_type, waiting_tasks_ ...
- Spring事务属性具体解释
Spring.是一个Java开源框架,是为了解决企业应用程序开发复杂性由Rod Johnson创建的.框架的主要优势之中的一个就是其分层架构,分层架构同意使用者选择使用哪一个组件,同一时候为 J2EE ...
- ubuntu——Kconfig、.config、Makefile的关系
原文地址:http://blog.csdn.net/estate66/article/details/5886816 ,本人对此文有改进. 当我们编写完一个驱动后,我们要把它以模块形式编译或者直接编译 ...
- Linux环境下的make和makefile详解
无论是在Linux还是在Unix环境中,make都是一个非常重要的编译命令.不管是自己进行项目开发还是安装应用软件,我们都经常要用到make或make install.利用make工具,我们可以将大型 ...
- 微信小程序—智能小蜜(基于智能语义解析olami开放平台)
概述 该程序支持功能有查天气.查诗词.查百科.算算术.查日历.看笑话.看故事.聊天等,通过用户输入语句智能解析用户意图输出相应答案. 详细 代码下载:http://www.demodashi.com/ ...
- iOS开发-应用之间的跳转及通信
Update 2016-08-12: 在Github的Demo上增加Mac自定义Url Scheme,可以在Safari上输入特定协议头打开应用,并传递参数) 简介 我们接下来将要实现应用程序之间的跳 ...
- EMQ配置
参考官方配置页面:http://emqtt.com/docs/v2/tune.html Linux 操作系统参数系统所有进程可打开的文件数量官方配置: sysctl -w fs.file-max=20 ...