bootstrap轮播图模板-如何用Bootstrap制作轮播图

//在自定义css样式中加入下面代码,自定义css在后引入; 我爱编程网

.carousel>.left,.carousel>.right{

background-image:none;

}

Bootstrap,来自_witter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使得Web开发更加快捷。

它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。

直接用轮播插件

举一个最常见的轮播图例子,五张轮播图+圆点指示器+左右箭头。

<!--_紫纫_Query和unslider-->

<script_rc="jquery-1.11.1."></script>

<script_rc=""></script>

<!--写点样式,让轮播好看点-->

<style>

ul,ol{padding:0;}

.banner{position:relative;overflow:auto;text-align:center;}

.bannerli{list-style:none;}

.bannerulli{float:left;}

#b04{width:640px;}

#b04.dots{position:absolute;left:0;right:0;bottom:20px;}

#b04.dotsli

{

display:inline-block;

width:10px;

height:10px;

margin:04px;

text-indent:-999em;

border:2pxsolid#fff;

border-radius:6px;

cursor:pointer;

opacity:.4;

-webkit-transition:background.5s,opacity.5s;

-moz-transition:background.5s,opacity.5s;

transition:background.5s,opacity.5s;

}

#b04.dots

{

background:#fff;

opacity:1;

}

#b04.arrow{position:absolute;top:200px;}

#b04#al{left:15px;}

#b04#ar{right:15px;}

</style>

<!--_岩植サ牡胤叫瓷侠_-->

<div_lass="banner"_d="b04">

__<ul>

____<li><img_rc=""_lt=""_idth="640"_eight="480"></li>

____<li><img_rc=""_lt=""_idth="640"_eight="480"></li>

____<li><img_rc=""_lt=""_idth="640"_eight="480"></li>

____<li><img_rc=""_lt=""_idth="640"_eight="480"></li>

____<li><img_rc=""_lt=""_idth="640"_eight="480"></li>

__</ul>

__<a_ref="javascript:void(0);"_lass="unslider-arrow04_rev"><img_lass="arrow"_d="al"_rc=""_lt="prev"_idth="20"_eight="35"></a>

__<a_ref="javascript:void(0);"_lass="unslider-arrow04_ext"><img_lass="arrow"_d="ar"_rc=""_lt="next"_idth="20"_eight="37"></a>

</div>

<!--_詈笥_s控制-->

<script>

$(document).ready(function(e)_

__var_nslider04=$('#b04').unslider({

____dots:_rue

__}),

__data04=('unslider');

__

__$('.unslider-arrow04').click(function()_

____var_n=('')[1];

____data04[fn]();

__});

});

</script>

轮播图怎么做?轮播图可以起到展现主打产品、以及促销活动、装饰首页的效果。

首先打开ps软件。

新建一个空白图层、尺寸:1920x400像素。

可以找一些素材图片、拼凑一张轮播图、比如:做化妆产品可以找一些化妆品、化妆的人作为素材,自己做也可以。

可以先给图片一个底色、让画面显得好看一点。

接着在添加一些装饰线条、或是圆形形状、用来写文字或做装饰。

装饰好后再加上主打产品,产品位置可以居中一点让画面有紧凑感。

最后加一些产品信息、如需要打折之类的可以加上一些促销语句、比如:买多少优惠、、送赠品的文字。