基于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框架实现图片切换，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # 图片切换 # Bootstrap标签页（Tab）插件使用方法 # 简单实现Bootstrap标签页 # BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、 # Bootstrap每天必学之标签页（Tab）插件 # 使用BootStrap实现标签切换原理解析 # Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片 # Bootstrap基本插件学习笔记之标签切换(17) # Bootstrap选项卡动态切换效果 # Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等） # 很棒的Bootstrap选项卡切换效果 # BootStrap中Tab页签切换实例代码 # 基于Bootstrap实现tab标签切换效果 # Bootstrap实现的标签页内容切换显示效果示例 # 创建一个 # 小编 # 在此 # 给大家 # 所述 # 给我留言 # 感谢大家 # 存储过程 # 疑问请 # 有任何 # Description # string # Sequence # Title # ImageUrl # set # public # Models # Slider # Slider_nbr

返回目录在线咨询

上一篇：Python如何从Excel处理数据_表格数据读取与清洗方法【教程】
下一篇：Python自然语言处理模型如何生成高质量文本的训练技巧【教程】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

基于Bootstrap框架实现图片切换

您的项目需求