首页 > 代码库 > 图片轮播

图片轮播

 1 <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="6000"> 2     @*<ol class="carousel-indicators"> 3         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 4         <li data-target="#myCarousel" data-slide-to="1"></li> 5         <li data-target="#myCarousel" data-slide-to="2"></li> 6         <li data-target="#myCarousel" data-slide-to="3"></li> 7         <li data-target="#myCarousel" data-slide-to="4"></li> 8     </ol>*@ 9     <div class="carousel-inner" role="listbox">10         <div class="item active">11             <img src=http://www.mamicode.com/"~/images/tupian1.png" @*alt="ASP.NET"*@ class="img-responsive" />12             @*<div class="carousel-caption" role="option">13                 <p>14                     Learn how to build ASP.NET apps that can run anywhere.15                     <a class="btn btn-default" href=http://www.mamicode.com/"http://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409">16                         Learn More17                     </a>18                 </p>19             </div>*@20         </div>21         <div class="item">22             <img src=http://www.mamicode.com/"~/images/tupian2.png" @*alt="Visual Studio"*@ class="img-responsive" />23             @*<div class="carousel-caption" role="option">24                 <p>25                     There are powerful new features in Visual Studio for building modern web apps.26                     <a class="btn btn-default" href=http://www.mamicode.com/"http://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409">27                         Learn More28                     </a>29                 </p>30             </div>*@31         </div>32         <div class="item">33             <img src=http://www.mamicode.com/"~/images/tupian3.png" @*alt="Package Management"*@ class="img-responsive" />34             @*<div class="carousel-caption" role="option">35                 <p>36                     Bring in libraries from NuGet, Bower, and npm, and automate tasks using Grunt or Gulp.37                     <a class="btn btn-default" href=http://www.mamicode.com/"http://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409">38                         Learn More39                     </a>40                 </p>41             </div>*@42         </div>43         <div class="item">44             <img src=http://www.mamicode.com/"~/images/tupian4.png" @*alt="Microsoft Azure"*@ class="img-responsive" />45             @*<div class="carousel-caption" role="option">46                 <p>47                     Learn how Microsofts Azure cloud platform allows you to build, deploy, and scale web apps.48                     <a class="btn btn-default" href=http://www.mamicode.com/"http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">49                         Learn More50                     </a>51                 </p>52             </div>*@53         </div>54         <div class="item">55             <img src=http://www.mamicode.com/"~/images/tupian5.png" @*alt="Microsoft Azure"*@ class="img-responsive" />56             @*<div class="carousel-caption" role="option">57                 <p>58                     Learn how Microsofts Azure cloud platform allows you to build, deploy, and scale web apps.59                     <a class="btn btn-default" href=http://www.mamicode.com/"http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">60                         Learn More61                     </a>62                 </p>63             </div>*@64         </div>65     </div>66     @*<a class="left carousel-control" href=http://www.mamicode.com/"#myCarousel" role="button" data-slide="prev">67         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>68         <span class="sr-only">Previous</span>69     </a>70     <a class="right carousel-control" href=http://www.mamicode.com/"#myCarousel" role="button" data-slide="next">71         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>72         <span class="sr-only">Next</span>73     </a>*@74 </div>

 

图片轮播