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图片轮播效果,相信总有一款你满意的! 第一种效果:Bootstrap简单轮播 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title...
基于bootstrap的轮播插件 carousel
NULL 博文链接:https://onestopweb.iteye.com/blog/2268918
图片预览轮播展示,使用的是Bootstrap 轮播(Carousel)插件,提供了自适应的特性,适用于多图片预览。
Bootstrap轮播插件中图片变形的终极解决方案 用法jqthumb.js_.docx
这是一款基于Bootstrap的响应式Carousel轮播图插件。该轮播图插件在原生Bootstrap Carousel的基础上进行扩展,使轮播图可以更好的布局,以及适应屏幕的尺寸。
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 使用bootstrap的轮播插件可以向站点添加滑块,内容...
主要介绍了Bootstrap轮播插件中图片变形的终极解决方案,使用jqthumb.js,感兴趣的小伙伴们可以参考一下
Bootstrap每天必须之轮播(Carousel)插件,Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式,感兴趣的小伙伴们可以参考一下
本文细致的为大家分享了Bootstrap轮播插件简单实例,供大家参考,具体内容如下 使用Bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入 效果图: ...
主要为大家详细介绍了Bootstrap轮播插件使用代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
功能最全面的jquery响应式图片轮播插件
轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果: 具体实现方法请看下面的代码: <div class=carousel data-ride=carousel id=carousel ...
收费和免费的轮播插件多的是不胜枚举。其中很 多提供很多有用的配置选项和动态效果。 很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能。同时你的项目是采用Bootstrap,(一个最流行的开源前端 ...
主要为大家详细介绍了Bootstrap基本插件学习笔记之轮播幻灯片的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Bootstrap 4布局:响应式单页设计这是... 了解如何利用Scrollspy插件跟踪导航,如何创建图像轮播以及如何构建动画。 另外,本课程为您提供了一个随时可用的模板,用于启动新项目。学习目标建立页眉和页脚为您的项目
Bootstrap中轮播图插件叫作Carousel 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 class=”carousel slide” data-ride=”carousel” 表示当 前是一个轮播图 bootstrap.js会自动为当前元素添加图片轮播的...