基于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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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结合ACCESS的跨库查询功能
2015/06/12 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python运算符+与+=的方法实例
2021/02/18 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
促销活动计划书
2014/05/02 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL