基于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轮播器插件的更多相关文章

  1. swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要

    奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...

  2. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  3. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  4. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  5. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  6. vue-awesome-swipe 基于vue使用的轮播组件 使用(改)

    npm install vue-awesome-swiper --save  //基于vue使用的轮播组件 <template> <swiper :options="swi ...

  7. jQyery实现轮播器

    看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直 ...

  8. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  9. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

随机推荐

  1. GCC高级测试功能扩展——程序性能测试工具gprof、程序覆盖测试工具gcov

    gprof是GNU组织下的一个比较有用的性能测试功能: 主要功能:   找出应用程序中消耗CPU时间最多的函数: 产生程序运行时的函数调用关系.调用次数 基本原理:   首先用户要使用gprof工具, ...

  2. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  3. windows 设置定时锁屏

      设置间隔指定时间电脑自动锁屏 CreateTime--2017年7月3日10:16:14Author:Marydon 参考地址:电脑爱好者杂志 举例:实现每间隔45分钟,电脑自动锁屏 实现思路: ...

  4. POJ 2112 Optimal Milking（最大流）

    题目链接:http://poj.org/problem?id=2112 Description FJ has moved his K (1 <= K <= 30) milking mach ...

  5. iOS主题/皮肤之SakuraKit

    概述 目前市场上很多 App 都有主题变更.皮肤切换的功能.随着项目代码量的不断增长,业务不断完善,功能性代码逐渐趋于模块化,尤其是在多人协作开发同一个项目时,模块解耦尤为重要,同时,公共基础库的功能 ...

  6. Python爬虫实战案例：爬取爱奇艺VIP视频

    一.实战背景 爱奇艺的VIP视频只有会员能看,普通用户只能看前6分钟.比如加勒比海盗5的URL:http://www.iqiyi.com/v_19rr7qhfg0.html#vfrm=19-9-0-1 ...

  7. IntelliJ IDEA导航特性Top20

    在前面的文章里,我介绍了IntelliJ IDEA(以下称IntelliJ)中与代码补全及重构相关的特性.今天我将介绍另外一个利器——IntelliJ的导航(Navigation),只要运用得当,它将 ...

  8. .Net Excel 导出图表Demo(柱状图，多标签页) .net工具类 分享一个简单的随机分红包的实现方式

    .Net Excel 导出图表Demo(柱状图,多标签页) 1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用 新建一 ...

  9. DevExpress实现GridControl删除所有行的方法

    /// <summary> /// 删除全部行 /// </summary> /// <param name="gridView">GridVi ...

  10. Redis C#入门

    redis-cli.exe 为客户端 redis-server.exe 为服务端 进行操作都是在客户端上操作,先随便添加一组 key value试一下: 再输入Get "键"名称, ...