图片轮播
Posted 沉默种子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片轮播相关的知识,希望对你有一定的参考价值。
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="~/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://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409"> 16 Learn More 17 </a> 18 </p> 19 </div>*@ 20 </div> 21 <div class="item"> 22 <img src="~/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://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409"> 27 Learn More 28 </a> 29 </p> 30 </div>*@ 31 </div> 32 <div class="item"> 33 <img src="~/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://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409"> 38 Learn More 39 </a> 40 </p> 41 </div>*@ 42 </div> 43 <div class="item"> 44 <img src="~/images/tupian4.png" @*alt="Microsoft Azure"*@ class="img-responsive" /> 45 @*<div class="carousel-caption" role="option"> 46 <p> 47 Learn how Microsoft‘s Azure cloud platform allows you to build, deploy, and scale web apps. 48 <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409"> 49 Learn More 50 </a> 51 </p> 52 </div>*@ 53 </div> 54 <div class="item"> 55 <img src="~/images/tupian5.png" @*alt="Microsoft Azure"*@ class="img-responsive" /> 56 @*<div class="carousel-caption" role="option"> 57 <p> 58 Learn how Microsoft‘s Azure cloud platform allows you to build, deploy, and scale web apps. 59 <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409"> 60 Learn More 61 </a> 62 </p> 63 </div>*@ 64 </div> 65 </div> 66 @*<a class="left carousel-control" href="#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="#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>
以上是关于图片轮播的主要内容,如果未能解决你的问题,请参考以下文章