基于Bootstrap框架实现图片切换

 更新时间:2017年03月10日 16:59:19   作者:Insus.NET  
这篇文章主要介绍了基于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框架实现图片切换,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript 日期相减-在线教程(附代码)

    javascript 日期相减-在线教程(附代码)

    这篇文章主要介绍了javascript 日期相减的实例讲解,附上代码供大家查看,需要的朋友可以参考下
    2017-08-08
  • 一文详细分析前端请求中的“Unsupported Media Type”问题

    一文详细分析前端请求中的“Unsupported Media Type”问题

    在Web开发中,前后端交互频繁遇到HTTP状态码415错误,这表明服务器无法处理因Content-Type不匹配的请求,常见于POST或PUT请求,必须确保请求头中的Content-Type与服务器期望的一致,跨域请求中,需要的朋友可以参考下
    2024-10-10
  • javascript 面向对象技术基础教程

    javascript 面向对象技术基础教程

    看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.
    2009-12-12
  • JS 毫秒转时间示例代码

    JS 毫秒转时间示例代码

    毫秒转时间的方法有很多,在本文将为大家介绍下js中是如何实现的,感兴趣的朋友可以参考下
    2013-09-09
  • JS冒泡事件与事件捕获实例详解

    JS冒泡事件与事件捕获实例详解

    这篇文章主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • js实现的仿新浪微博完美的时间组件升级版

    js实现的仿新浪微博完美的时间组件升级版

    本博客没有华丽的布局,只求朴实的js的代码,只为js代码爱好者提供,一周大概会出1-2篇js前沿代码的文章.只是代码,不说技术
    2011-12-12
  • webpack-dev-server 的 host 配置 0.0.0.0的方法

    webpack-dev-server 的 host 配置 0.0.0.0的方法

    这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下
    2024-01-01
  • JS定时器实例

    JS定时器实例

    在javascritp中,有两个关于定时器的专用函数
    2013-04-04
  • 使用Mock.js生成前端测试数据

    使用Mock.js生成前端测试数据

    这篇文章主要介绍了使用Mock.js生成前端测试数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 关于小程序优化的一些建议(小结)

    关于小程序优化的一些建议(小结)

    这篇文章主要介绍了关于小程序优化的一些建议(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论