基于Bootstrap框架实现图片切换

准备图片，把相关记录添加至数据库表中:　　

创建一个存储过程，获取所有记录：

在asp.net mvc专案中，部署bootstrap环境......

然后创建一个model:

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;
namespace insus.net.models
{
 public class slider
 {
  public byte slider_nbr { get; set; }
  public byte sequence { get; set; }
  public string title { get; set; }
  public string imageurl { get; set; }   
  public string description { get; set; }
 }
}

再创建一个entity:

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;
using insus.net.models;
using system.data;
using insus.net.extendmethods;
using insus.net.databases;
namespace insus.net.entities
{
 public class sliderentity
 {
  bizsp sp = new bizsp();
  public ienumerable<slider> sliders()
  {
   sp.connectionstring = db.connectionstring;
   sp.parameters = null;
   sp.procedurename = "usp_slider_getall";
   datatable dt = sp.executedataset().tables[0];
   return dt.tolist<slider>();
  }
 }
}

设置图片切换速度：

view视图：

<div class="tp-wrapper">
 <div id="imgcarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
   @foreach (var item in (new sliderentity()).sliders())
   {
    <li data-target="#imgcarousel" data-slide-to="@item.sequence" class="@(item.sequence == 0 ? "active" : "")"></li>
   }
  </ol>
  <div class="carousel-inner">
   @foreach (var item in (new sliderentity()).sliders())
   {
    <div class="@(item.sequence == 0 ? "item active" : "item")">
     <img src="~/content/img/slider-images/@item.imageurl"
       alt="@item.description" class="img-responsive" />
     <div class="carousel-caption">
      <h1>@item.title</h1>
      <p>@item.description</p>
     </div>
    </div>
   }
  </div>
  <a class="left carousel-control" href="#imgcarousel" rel="external nofollow" rel="external nofollow" data-slide="prev">
   <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#imgcarousel" rel="external nofollow" rel="external nofollow" data-slide="next">
   <span class="icon-next"></span>
  </a>
 </div>
</div>

演示：

以上所述是小编给大家介绍的基于bootstrap框架实现图片切换，希望对大家有所帮助