如何用Bootstrap制作轮播图_IT百科

工具/材料

Sublime Text

首先我们需要新建一个HTML5的文档，然后在文档中导入Bootstrap的样式文件，这个文件中包含了轮播图所有的样式定义，如下图所示

接下来我们需要导入脚本文件，注意先导入Jquery文件，然后导入bootstrap的脚本文件，顺序一定不能颠倒，如下图所示

然后在body标签里定义轮播图的容器，容器的大小需要和图片的大小一样，否则会出现轮播图错位，效果如下图所示

接下来我们就正式的添加轮播图了，这里先添加三张图，如下图所示，注意让哪种轮播图显示直接调用Bootstrap的active样式即可

轮播图片添加完毕以后，就可以添加轮播图焦点了。在Bootstrap中运用li列表定义轮播图焦点，注意焦点的数量和图片的数量要一样，如下图所示

轮播图中还有一个必不可少的元素就是左右箭头，通过Bootstrap的carousel-control样式添加轮播图箭头，如下图所示

最后我们运行程序以后，在页面中你就可以看到如下图所示的轮播图效果了。可以看到我们上面说的轮播图焦点和左右箭头都在页面上显示出来了，如下图所示

你的意思是广告轮换么？？

这个用javascript就可以实现了

FLASH的话很难找的..

你可以参考

http://johnpatrickgiven.com/jquery/Image-Scale-Carousel/

参考代码，还有一个js文件，留下邮箱发给你

<!DOCTYPE HTML>

<head>

<title>jQuery图片放大变小切换代码</title>

*{margin:0padding:0list-style-type:none}

a,img{border:0}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体"}

.banner{width:100%overflow:hiddenheight:470pxposition:relative}

.banList{position:absoluteleft:50%margin-left:-960pxheight:470px}

.banList li{height:470pxopacity:0position:absolutetransform:scale(0)transition:transform 0.5s ease 0s, opacity 1.5s ease 0sz-index:1}

.banList li.active{opacity:1transform:scale(1)z-index:2}

.fomW{position:absolutebottom:20pxleft:50%height:20pxz-index:9width:1000pxmargin-left:-500px}

.jsNav{text-align:center}

.jsNav a{display:inline-blockbackground:#fffwidth:15pxheight:15pxborder-radius:50%margin:0 5px}

.jsNav a.current{background:#fc8f0fcursor:pointer}

</style>

</head>

<body>

</ul>

</div>

$(function(){

$(".banner").swBanner()

})

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

如何用Bootstrap制作轮播图