bxslider 旋转

最新推荐文章于 2022-01-05 11:31:43 发布
最新推荐文章于 2022-01-05 11:31:43 发布
阅读量111 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/544923
版权

这个是我自己发现的一个旋转


<!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="images/s1.jpg" /></li> 

      <li><img src="images/s2.jpg" /></li> 

      <li><img src="images/s3.jpg" /></li> 
</ul>

3、调用bxSlider插件，当页面内容加载完时调用bxSlider。

$(function(){ 

    $('.bxslider').bxSlider(); 
});

参考

https://www.helloweba.com/view-blog-219.html

本文转自wiwi博客51CTO博客，原文链接http://blog.51cto.com/wiwili/1969641如需转载请自行联系原作者


wiwili

国外人做的 jquery图片展示
05-16
国外人做的 jquery图片展示 感觉挺不错的
10 jQuery Plugins and Techniques for Doing More with Images
03-19
例如，Nivo Slider和bxSlider是广受欢迎的jQuery幻灯片插件。 2. **响应式图像处理**: 在现代网页设计中，响应式布局至关重要。jQuery插件如Responsify.js可以帮助自动调整图像大小，以适应不同设备的屏幕尺寸，...
bxslider使用帮助
菲宇运维
05-06 7679
“bxSlider”就是一款响应式的幻灯片js插件bxSlider特性充分响应各种设备，适应各种屏幕；支持多种滑动模式，水平、垂直以及淡入淡出效果；支持图片、视频以及任意html内容；支持触摸滑动；支持Firefox，Chrome，Safari，iOS，Android，IE7+bxSlider使用方法：加载jQuery库，加载bxSlider插件文件和相关CSS文件； &lt;!-- bxS...
jquery 轮播插件 bxslider
weixin_34405557的博客
01-05 287
引入文件 <link h<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/jquery.bxslider.js"></script> <link href="css/jq...
非常好用的产品橱窗滑动js
u010289111的专栏
06-03 1602
ma.bxslider.min.js 暂时没有放到百度云 复制下来了 /**  * BxSlider v4.1.1 - Fully loaded, responsive content slider  * http://bxslider.com  *  * Copyright 2013, Steven Wanderski - http://stevenwanderski.com - 
bxSlider——一个精悍的拥有一大波焦点图轮播滑动特效的Js程序
07-02 1561
打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网：http://bxslider.com/ ************************************************************************************************...
jQuery图文卡片3D叠加轮播切换代码.zip
最新发布
09-21
尽管这个项目没有明确指出使用了哪个特定的jQuery插件，但我们可以推测它可能包含了一些自定义的动画插件或者现有的轮播插件的改编版本，如`bxSlider`或`swiper`。这些插件帮助开发者快速实现复杂的效果，而无需从头...
jQuery图片效果
11-23
5. **jQuery图片库和插件**：除了基础的jQuery方法，还有许多优秀的jQuery图片插件可供选择，如`bxSlider`、`flexSlider`、`Slick`等，它们提供了丰富的选项和自定义设置，帮助开发者快速构建出各种复杂的图片展示...
超牛jquery图片特效
12-22
jQuery 社区提供了许多优秀的图片特效插件，如：`bxSlider`、`FlexSlider`、`Slick Slider`等，它们封装了许多高级功能，如触控支持、分页导航、自定义动画等，使开发者能快速构建专业级的图片特效。 八、实际应用...
学生网页作业web网页设计实例作业 ——自适应绿色茶叶公司(12页) HTML+CSS+JS网页设计期末课程大作业
01-05 469
web网页设计实例作业 ——自适应绿色茶叶公司(12页) HTML+CSS+JS网页设计期末课程大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录web网页设计实例
[前端]-jquery插件bxslider用法实例分析
小白的日常记录
05-14 9828
转载自：原文地址：http://www.jb51.net/article/64194.htm原文地址：https://blog.csdn.net/u013076997/article/details/52850269首先调用对应js文件：?12&lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;&lt;scr...
jq插件之bxSlider
小菜鸟的博客
03-27 2495
1、首先是加载jQuery库，以及bxSlider插件文件和相关CSS文件，您可以从官方网站下载最新版本的bxSlider。 1 2 3 link rel="stylesheet" type="text/css" href="jquery.bxslider.css">  script src="http://libs.baidu.com/jquery/1.8.3/
【汇智学堂】-div+css布局二十一(汇智学堂关于我们-js特效的使用）
weixin_39593940的博客
07-07 224
效果图： div内容 <div style="text-align: center;margin-top:50px;"> <p style="margin-bottom: 30px;font-size: 34px;color: #000;">技术进阶实验室</p> <p style="font-size: 18px;color: #868...
用python（kivy模块）开发安卓影视App——主页面开发（一）
wenyiyimo的博客
10-19 4345
由于kivy在国内使用较少，在开发道路上困难重重，本人也花了不少精力来进行开发，希望大家能够从中得到学习与锻炼。 下面是我的成果图 首先是py文件 import requests import re from kivy.properties import StringProperty from kivymd.app import MDApp from kivymd.uix.button import MDRectangleFlatButton from kivymd.uix.card .
swiper插件在响应式下不同宽度显示不同个数
weixin_39752673的博客
12-19 3490
var swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 40, breakpointsInverse: true, breakpoints: { //当宽度大于等于320 320: { slidesPerView: 2, spaceBet...
精选40款创意jQuery图片滑动与弹出插件
除此之外，还有许多其他插件如Nivo Slider、皇家幻灯片（皇家滑动插件）、bxSlider等，它们各自拥有独特的特性和设计，可以根据实际需求选择最适合的插件。这些jQuery图片滑动插件通常包含丰富的配置选项，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值