`

Bootstrap插件--图片轮播

 
阅读更多
http://www.bootcss.com/p/unslider/

1.首先引入jQuery和Unslider的脚本:
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.bootcss.com/p/unslider/unslider.min.js"></script>


2.准备HTML代码创建如下布局:
<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>


3.添加样式保证浮动定位准确:
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; height:200px;}
.banner ul li { float: left; }


4.添加事件:
<script type="text/javascript">
$(function() {
    $('.banner').unslider();
});</script>


给每个li添加背景图片属性
background-image: url(/img/xx.jpg); background-size: 100% 100%;
这样就可以用插件轻松实现图片轮播了~

源码请移步:https://github.com/idiot/unslider/blob/master/src/unslider.js
分享到:
评论

相关推荐

    bootstrap-5.3.0-alpha1.zip

    此外,Bootstrap的组件库包括了诸如卡片(Cards)、轮播(Carousel)、下拉菜单(Dropdowns)等常见的UI元素,它们都有统一的样式和交互,使得整个网站的视觉一致性得以保证。Bootstrap还支持JavaScript插件,如弹出...

    bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip

    Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件,如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3,通过预定义的类名,开发者可以快速构建美观的用户界面。 ...

    bootstrap-5.3.2-dist.zip

    2. **JavaScript插件**:Bootstrap的JavaScript组件包括模态框(Modal)、下拉菜单(Dropdown)、滚动监听(Scrollspy)、工具提示(Tooltip)、弹出框(Popover)、轮播(Carousel)等。这些插件基于jQuery库,但...

    Java bootstrap-3.4.1-dist 前端框架

    4. **JavaScript插件**:除了CSS,Bootstrap还包含了一些基于jQuery的JavaScript插件,如滚动spy、模态对话框、轮播组件、下拉菜单等。这些插件可以增强用户体验,实现动态交互功能。 5. **响应式设计**:Bootstrap...

    bootstrap-5.1.3-dist.zip

    4. **JavaScript插件**:除了CSS,Bootstrap还包含一系列基于jQuery的JavaScript插件,如折叠(collapse)、滚动spy、轮播(carousel)和模态框等,这些插件可以增强交互性。 5. **自定义**:Bootstrap 5.1.3允许...

    bootstrap-3.3.7-dist.zip

    - **轮播图**(Carousel):可以创建滑动展示多张图片或内容的组件。 - **表单**(Forms):预设了表单元素的样式,如输入框、选择框、按钮等,提供了统一的视觉效果。 - **警告提示**(Alerts)、**进度条**...

    bootstrap-4.1.3-dist

    - `bootstrap.js`:未压缩的Bootstrap插件源码。 3. **JavaScript 插件**:Bootstrap的JavaScript插件包括导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、工具提示(tooltip)、弹出框(popover)、...

    bootstrap-3.4.1-dist 2.zip

    3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...

    bootstrap-3.4.1-dist(加个关注就行).zip

    JavaScript插件是Bootstrap的另一大亮点,它们扩展了HTML元素的功能,如模态框(`modal`)、下拉菜单(`dropdown`)、滚动监听(`scrollspy`)和轮播(`carousel`)等。通过引入`bootstrap.js`或单独的插件文件,并使用相应...

    bootstrap-4.6.0-dist.zip

    2. **组件**:Bootstrap包含多种可复用的UI组件,如按钮、表单、导航、模态、下拉菜单、轮播图等。4.6.0可能对这些组件的样式和功能进行了优化,增加了自定义选项,使得开发者能更灵活地调整设计。 3. **JavaScript...

    bootstrap-3.3.7-dist.rar,免费下载

    这个版本的Bootstrap是稳定且成熟的,提供了丰富的预定义样式、组件和JavaScript插件,使得开发者可以快速构建美观、功能齐全的网站。 在“bootstrap-3.3.7-dist.rar”压缩包中,主要包含以下内容: 1. CSS 文件:...

    bootstrap-4-dev

    8. **改进的JavaScript插件**:Bootstrap 4的JavaScript插件如模态、下拉菜单、轮播图等进行了重构,性能更优,API也更加友好。 9. **Sass支持**:Bootstrap 4引入了Sass作为其CSS预处理器,提供了更强大的变量、...

    bootstrap-2.3.2-dist

    4. **JavaScript插件**:Bootstrap 2.3.2包含多个JavaScript插件,如轮播、模态、下拉菜单、工具提示和弹出框等。这些插件基于jQuery库,可以通过简单的数据属性和JavaScript方法来启用和自定义。 5. **定制**:...

    twitter-bootstrap-v2.1.1-0-gc52368d.zip

    - `js` 文件夹:包含Bootstrap的JavaScript插件和jQuery库(Bootstrap基于jQuery)。 - `img` 文件夹:可能包含框架使用的图标和其他图像资源。 - `less` 文件夹:Less源代码,供自定义Bootstrap样式使用。 - `fonts...

    Bootstrap轮播插件使用代码

    Bootstrap轮播插件是Twitter开发的前端框架Bootstrap中的一部分,它提供了一种优雅的方式来展示多张图片或内容,常用于创建动态的滑动展示区,如网站的首页、产品介绍等场景。以下将详细介绍如何使用Bootstrap轮播...

    bootstrap 4.1.3-dist.zip

    4. **JavaScript插件**:Bootstrap包含了诸如折叠、滚动spy、模态对话框等JavaScript插件,这些插件可以直接在你的项目中使用,无需额外编写代码。 5. **定制化**:通过其在线定制器,开发者可以自定义颜色、字体、...

    bootstrap-4.6.2

    2. JS文件:`bootstrap.min.js`包含了Bootstrap的JavaScript组件,例如模态框、下拉菜单、轮播图等,它们经过压缩和优化,提高加载速度。 3. 图标字体文件:`glyphicons-halflings-regular.*`(可能是.svg、.eot、....

    好看的BootStrap--Demo(html文件)

    4. **JavaScript插件**:Bootstrap还包含了一些常用的JavaScript插件,如模态框(modal)、下拉菜单(dropdown)、滚动spy、轮播(carousel)和工具提示(tooltip)等,它们可以方便地通过添加特定的类名到HTML元素上来启用...

    Bootstrap 第18章 轮播插件

    在第18章中,我们主要关注的是Bootstrap的轮播(Carousel)插件,这是一个强大的功能,用于创建动态的、可滑动的图片或内容展示。 Bootstrap轮播插件通过简单的HTML和CSS结构,配合JavaScript插件,能够实现多张...

    startbootstrap-sb-admin-gh-pages_TheFront_boostrap_

    JavaScript部分则包含Bootstrap的JS插件,如 collapse、dropdown、modal等,它们基于jQuery库,增强了Bootstrap的功能,使动态效果更加流畅。此外,还有可能包含第三方库如Chart.js或Google Charts,用于生成图表,...

Global site tag (gtag.js) - Google Analytics