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>

/*** 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轮播器插件相关推荐

html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
jQuery焦点图轮播特效插件bxslider，使用说明及免费下载四川智汇蓝图整理带bxslider免费下载地址
这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】
本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好 ...

jQuery补充，基于jQuery的bxslider轮播器插件

jQuery补充，基于jQuery的bxslider轮播器插件相关推荐

最新文章

热门文章