bxslider 旋转
这个是我自己发现的一个旋转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<title>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
<style>
p{ width:100%; height:40px; font-size:20px; color:#333; line-height:40px; text-align:center; font-family:"微软雅黑"}
</style>
</head>
<body>
<!-- ---------------------------------slider1--------------------------------------------- -->
<p>slider1(maxSlides)</p>
<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>
<script type="text/javascript">
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider2--------------------------------------------- -->
<p>slider2(slideWidth auto)</p>
<div class="slider2">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider2').bxSlider({
slideWidth: 300,
auto: true,
autoControls: true,
minSlides: 2,
maxSlides: 2,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider3--------------------------------------------- -->
<p>slider3(moveSlides)</p>
<div class="slider3">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider3').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider4--------------------------------------------- -->
<p>slider4(startSlide)</p>
<div class="slider4">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider4').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
startSlide: 1,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider5--------------------------------------------- -->
<p>slider5(Vertical)</p>
<div class="slider5">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider5').bxSlider({
mode: 'vertical',
slideWidth: 200,
minSlides: 2,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider6--------------------------------------------- -->
<p>slider6(Image)</p>
<div class="slider6">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider6').bxSlider({
mode: 'fade',
slideWidth: 600,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider7--------------------------------------------- -->
<p>slider7(infiniteLoop hideControlOnEnd)</p>
<div class="slider7">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider7').bxSlider({
slideWidth: 600,
infiniteLoop: false,
hideControlOnEnd: true,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider8--------------------------------------------- -->
<p>slider8(adaptiveHeight)</p>
<div class="slider8">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x300&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x250&text=FooBar4"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider8').bxSlider({
slideWidth: 600,
adaptiveHeight: true,
startSlides: 0,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider9--------------------------------------------- -->
<p>slider9(ticker)</p>
<div class="slider9">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider9').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
ticker: true,
speed: 12000,
startSlides: 0,
slideMargin: 10
});
});
</script>
</body>
</html>
也是在一个div 里面嵌套一个div 注意引用 js css 的顺序
还可以是
2、准备滑动内容，我们创建一个ul.bxslider，然后在其子元素li中加入滑动内容，滑动内容可以是图片、视频以及任意html内容：
<ul class="bxslider"> <li><img src="p_w_picpaths/s1.jpg" /></li> <li><img src="p_w_picpaths/s2.jpg" /></li> <li><img src="p_w_picpaths/s3.jpg" /></li> </ul>3、调用bxSlider插件，当页面内容加载完时调用bxSlider。
$(function(){ $('.bxslider').bxSlider(); });参考
https://www.helloweba.com/view-blog-219.html
转载于:https://blog.51cto.com/wiwili/1969641
bxslider 旋转相关推荐
- 5 用python进行OpenCV实战之图像变换2（旋转）
前言 最近有些其他事情,一周未更新了,实在抱歉.以后争取,每周多更新几次.虽然也不知道能有多少人看到,但是也算自己的一种坚持吧! 1 旋转 1.1 旋转基本操作 旋转的概念正如我们平常听见的一样:将图 ...
- LeetCode简单题之旋转字符串
题目 给定两个字符串, A 和 B. A 的旋转操作就是将 A 最左边的字符移动到最右边. 例如, 若 A = 'abcde',在移动一次之后结果就是'bcdea' .如果在若干次旋转操作之后,A 能 ...
- ie旋转滤镜Matrix
旋转一个元素算是一个比较常见的需求了吧,在支持CSS3的浏览器中可以使用transform很容易地实现,这里有介绍:http://www.css88.com/archives/2168,这里有演示ht ...
- unity人物旋转移动代码_Unity3D研究院之脚本实现模型的平移与旋转（六）
123 说: 雨松大大,有个问题想请教一下,我用UNET构建了个小场景,在电脑上可以客户端可以连接到服务器,Windows和Linux都可以,发布到安卓缺连不了,这是问什么呢 说: 求教一下,刚刚接触 ...
- 北师大版图形的旋转二教案_北师大2011课标版(闫金铎主编)初中物理八年级下册三、重力公开课优质课课件教案视频...
<重力>教学设计 一.教学目标 (一)知识与技能 1．了解重力及重力产生的原因. 2．了解重力的方向以及重垂线的应用. 3．了解重力的大小与质量的关系. (二)过程与方法 1．经历探究重力 ...
- android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
- html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
- SIFT和SURF的替换算法——ORB (Oriented FAST and Rotated BRIEF 快速定向和旋转)
SIFT和SURF的替代算法--ORB (Oriented FAST and Rotated BRIEF 快速定向和旋转 1. 效果图 2. 源码 参考 1. 用于关键点检测和描述的SIFT(Scal ...
- C语言实现bmp图像几何变换（移动，旋转，镜像，转置，缩放）
C语言实现bmp图像几何变换(移动,旋转,镜像,转置,缩放) 移动 旋转 镜像 转置 缩放 自定义结构及函数如下: #define pi 3.1415926 typedef struct {unsig ...
最新文章
- stylelint初体验
- Freebsd10上部署open*** 服务器
- axure中备注线_琉璃：璇玑小本子上，别人名字都有备注唯独司凤没有，意义很浪漫...
- 文巾解题 1344. 时钟指针的夹角
- ubuntu11.10 mysql_Ubuntu11.10下mysql+apache+PHP
- 支付二维码php能实现吗_（实用篇）微信支付扫码支付php版
- Linux计划任务(at,crontab)
- UML-基于GRASP对象设计步骤
- Robin负载均衡策略存在问题及CSE解决方案
- 【转】UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc7 in position 1: invalid continuation 汉字编码
- 鼠标、键盘键值对应表
- 搭建Jetbrains家族IDE授权服务器
- 2020-12-02HTML及标签
- 记录：java实时回传大疆无人机的视频和音频，低延时，稳定高效，可以对接飞行数据、经纬度信息、飞行轨迹等
- 时间函数millis( )
- [附源码]计算机毕业设计JAVA领导干部听课评课管理系统
- Wireshark | 猿如意
- 异常解决:cococaption包出现找不到edu.stanford.nlp.semgraph.semgrex.SemgrexPattern错误
- 上行30m下行200m是多少宽带_套餐内有多少流量，就加送多少流量！电信流量攻势太凶猛！...
- 搜狗搜微信链接为什么老是失效？