Bootstrap的图片轮播示例代码

2024-03-27 22:00:04 23

示例一：

插入js及css支持：

<linkrel="stylesheet"href="css/bootstrap.min.css"/>
<scriptsrc="js/jquery-1.9.1.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>

HTML代码：

<divid="pictures"class="item">
<divid="myCarousel"class="carouselslide">
<!--轮播（Carousel）指标-->
<olclass="carousel-indicators">
<lidata-target="#myCarousel"data-slide-to="0"class="active"></li>
<lidata-target="#myCarousel"data-slide-to="1"></li>
<lidata-target="#myCarousel"data-slide-to="2"></li>
</ol>
<!--轮播（Carousel）项目-->
<divclass="carousel-inner">
<divclass="itemactive">
<imgsrc="images/gf.jpg"class="img-responsive"alt="Firstslide">
</div>
<divclass="item">
<imgsrc="images/psb.jpg"class="img-responsive"alt="Secondslide">
</div>
<divclass="item">
<imgsrc="images/uyt.jpg"class="img-responsive"alt="Thirdslide">
</div>
</div>
<!--轮播（Carousel）导航-->
<aclass="carousel-controlleft"href="#myCarousel"
data-slide="prev">&lsaquo;</a>
<aclass="carousel-controlright"href="#myCarousel"
data-slide="next">&rsaquo;</a>
</div>
</div>

示例二：

用法

<divid="myCarousel"class="carouselslide">
<!--Carouselitems-->
<divclass="carousel-inner">
<divclass="activeitem">…</div>
<divclass="item">…</div>
<divclass="item">…</div>
</div>
<!--Carouselnav-->
<aclass="carousel-controlleft"href="#myCarousel"data-slide="prev">‹</a>
<aclass="carousel-controlright"href="#myCarousel"data-slide="next">›</a>
</div>

所以，您把想要呈现的条目（比如images）以循环顺序放置在"carousel-inner"div中，通过""创建条目的导航。它使用定制的data属性"data-slide"来导航到上一个和下一个条目。

您必须在您要创建轮播的HTML文件引用jquery.js和bootstrap-carousel.js文件。

Bootstrap轮播实例

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>TwitterBootstrappagerwithnextandpreviousexample</title>
<metaname="description"content="TwitterBootstrappagerwithnextandpreviousexample">
<linkhref="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css"rel="stylesheet">
<styletype="text/css">
body{
margin:50px;
}
</style>
</head>
<body>
<ulclass="pager">
<li>
<ahref="#">Previous</a>
</li>
<li>
<ahref="#">Next</a>
</li>
</ul>
</body>
</html>

带有old和new的翻页实例

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>ExampleofcarousalwithTwitterBootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="ExampleofcarousalwithTwitterBootstrapversion2.0fromw3resource.com">
<!--Lestyles-->
<linkhref="twitter-bootstrap-v2/docs/assets/css/bootstrap.css"rel="stylesheet">
<linkhref="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css"rel="stylesheet">
<!--LeHTML5shim,forIE6-8supportofHTML5elements-->
<!--[ifltIE9]>
<scriptsrc="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Lefavandtouchicons-->
<linkrel="shortcuticon"href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<linkrel="apple-touch-icon"href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<linkrel="apple-touch-icon"sizes="72x72"href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<linkrel="apple-touch-icon"sizes="114x114"href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<divclass="navbarnavbar-fixed-top">
<divclass="navbar-inner">
<divclass="container">
<aclass="btnbtn-navbar"data-toggle="collapse"data-target=".nav-collapse">
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</a>
<aclass="brand"href="#"><imgsrc="/images/w3r.png"width="111"height="30"alt="w3resourcelogo"/></a>
<divclass="nav-collapse">
<ulclass="nav">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#about">About</a></li>
<li><ahref="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse-->
</div>
</div>
</div>
<divclass="container">
<!--Examplerowofcolumns-->
<divclass="row">
<divclass="span4">
<h2>HTML5andJSApps</h2>
<p></p>
<divid="myCarousel"class="carouselslide">
<!--Carouselitems-->
<divclass="carousel-inner">
<divclass="activeitem"><imgsrc="/update-images/html5_logo.png"alt="HTML5logo"width="500"height="99"/></div>
<divclass="item"><imgsrc="/update-images/javascript-logo.png"alt="JSlogo"width="500"height="99"/></div>
<divclass="item"><imgsrc="/update-images/schema.png"alt="Schema.orglogo"width="500"height="99"/></div>
<divclass="item"><imgsrc="/update-images/json.gif"alt="JSONlogo"width="500"height="99"/></div>
</div>
<!--Carouselnav-->
<aclass="carousel-controlleft"href="#myCarousel"data-slide="prev">‹</a>
<aclass="carousel-controlright"href="#myCarousel"data-slide="next">›</a>
</div>
</div>
</div>
<hr>
<footer>
<p>©Company2012</p>
</footer>
</div><!--/container-->
<!--Lejavascript
==================================================-->
<!--Placedattheendofthedocumentsothepagesloadfaster-->
<scriptsrc="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<scriptsrc="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
</body>
</html>

使用Javascript

您可以使用下面的JavaScript代码来创建轮播。

$('.carousel').carousel()

下面是您可以使用的选项

interval:规定幻灯片轮换的等待时间，以毫秒为单位。值的类型为number，默认值是5000。如果为false，轮播将不会自动开始循环。

pause:规定当鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。值的类型为string，默认值是'hover'。

下面是您可以使用的轮播方法

.carousel(options):初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。
$('.carousel').carousel({
interval:2000//inmilliseconds
})
.carousel('cycle'):从左到右循环各帧。
$('.carousel').carousel('cycle');
.carousel('pause'):停止轮播。
$('#myCarousel').hover(function(){
$(this).carousel('pause')
}
.carousel(number):将轮播定位到指定的帧上（帧下标以0开始，类似数组）。
$("#carousel_nav").click(function(){
varitem=4;
$('#home_carousel').carousel(item);
returnfalse;
});

.carousel('prev'):将轮播转到上一帧。

.carousel('next'):将轮播转到下一帧。

这里有两个事件用来增强轮播的功能。

slide:当slide实例方法被调用之后，此事件被立即触发。

slid:当所有幻灯片播放完之后，此事件被触发。

Bootstrap的图片轮播示例代码

热门推荐

随机推荐