基于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框架实现图片切换,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- Bootstrap标签页(Tab)插件使用方法
- 简单实现Bootstrap标签页
- BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
- Bootstrap每天必学之标签页(Tab)插件
- 使用BootStrap实现标签切换原理解析
- Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
- Bootstrap基本插件学习笔记之标签切换(17)
- Bootstrap选项卡动态切换效果
- Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
- 很棒的Bootstrap选项卡切换效果
- BootStrap中Tab页签切换实例代码
- 基于Bootstrap实现tab标签切换效果
- Bootstrap实现的标签页内容切换显示效果示例
相关文章
一文详细分析前端请求中的“Unsupported Media Type”问题
在Web开发中,前后端交互频繁遇到HTTP状态码415错误,这表明服务器无法处理因Content-Type不匹配的请求,常见于POST或PUT请求,必须确保请求头中的Content-Type与服务器期望的一致,跨域请求中,需要的朋友可以参考下2024-10-10
webpack-dev-server 的 host 配置 0.0.0.0的方法
这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下2024-01-01









最新评论