欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于Bootstrap框架实现图片切换

程序员文章站 2022-07-10 13:30:40
准备图片,把相关记录添加至数据库表中:   创建一个存储过程,获取所有记录: 在asp.net mvc专案中,部署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框架实现图片切换,希望对大家有所帮助