基于Bootstrap框架实现图片切换


Posted in Javascript onMarch 10, 2017

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

基于Bootstrap框架实现图片切换

创建一个存储过程,获取所有记录:

基于Bootstrap框架实现图片切换

在ASP.NET MVC专案中,部署Bootstrap环境......

然后创建一个model:

基于Bootstrap框架实现图片切换

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:

基于Bootstrap框架实现图片切换

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>();
  }
 }
}

设置图片切换速度:

基于Bootstrap框架实现图片切换

View视图:

基于Bootstrap框架实现图片切换

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

Javascript 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 #Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 #Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 #Javascript
AngularJS之页面跳转Route实例代码
Mar 10 #Javascript
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
浅谈Python 参数与变量
2020/06/20 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
大班开学家长寄语
2014/04/04 职场文书
人力资源职位说明书
2014/07/29 职场文书
邀请函怎么写
2015/01/30 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书