使用Bootstrap编写一个简单的网页轮播图效果


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        
        <script src="js/jquery.min.js">script>
        <script src="js/bootstrap.min.js">script>
        
    head>
    <body>
        <h1>图片轮播效果h1>
        
        <div id="imgs" data-interval="2000" data-ride="carousel" class="carousel slide" style="width: 791px;">
            <div class="carousel-inner">
                
                <div class="item active">
                    <a href="#"><img src="images/f1.jpg"/>a>
                div>
                <div class="item">
                    <a href="#"><img src="images/f2.jpg"/>a>
                div>
                <div class="item">
                    <a href="#"><img src="images/f3.jpg"/>a>
                div>
                <div class="item">
                    <a href="#"><img src="images/f4.jpg"/>a>
                div>
                <div class="item">
                    <a href="#"><img src="images/f5.jpg"/>a>
                div>

                
                <ul class="carousel-indicators">
                    <li data-target="#imgs" data-slide-to="0" class="active">li>
                    <li data-target="#imgs" data-slide-to="1">li>
                    <li data-target="#imgs" data-slide-to="2">li>
                    <li data-target="#imgs" data-slide-to="3">li>
                    <li data-target="#imgs" data-slide-to="4">li>
                ul>

                <a id="toLeft" href="#imgs" data-slide="prev" class="carousel-control left">a>
                <a id="toRight" href="#imgs" data-slide="next" class="carousel-control right">a>
            div>          
        div>
    body>
html>

你可能感兴趣的:(前端学习,bootstrap,stylesheet,html5,前端,轮播图)