码迷,mamicode.com
首页 > 其他好文 > 详细

照片自动滑动

时间:2016-05-19 13:11:54      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

包含的文件

技术分享

 

HTML代码:

技术分享
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">   <!--????IE?????-->
  <meta name="viewport" content="width=device-width,initial-scale=1">  <!---->
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="jquery-2.2.3.min.js"></script>
 <script src="bootstrap.min.js"></script>
  <style>
      #myCarousel{
         width:600px;
      }

  </style>
 </head>

 <body>
 <br/>
      <div class="container" id="myCarousel">
          <div id="carousel-example-generic" class="carousel slide">
              <ol class="carousel-indicators">
                 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                 <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                 <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
              </ol>
              <div class="carousel-inner">
                 <div class="item active">
                    <img src="1.jpg">
                    <div class="carousel-caption">
                       <h3>我的</h3>
                       <p>今天晚上能看见星星</p>
                    </div>
                 </div>

                  <div class="item ">
                    <img src="2.jpg">
                 </div>

                  <div class="item ">
                    <img src="3.jpg">
                 </div>
              </div>
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                 <span class="glyphicon glyphicon-chevron-left"></span>
              </a>

               <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                 <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
          </div>
      </div>
    
     <script>
        $(".carousel").carousel({
            interval:2000
        })
     </script>
    

 </body>
</html>
 
View Code

 

照片自动滑动

标签:

原文地址:http://www.cnblogs.com/147258llj/p/5508248.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!