基于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 相关文章推荐
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
基于JavaScript 实现拖放功能
Sep 12 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 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 年龄计算函数(精确到天)
2012/06/07 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
node.js中的console.error方法使用说明
2014/12/10 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
基于Python解密仿射密码
2019/10/21 Python
Python里面如何实现tuple和list的转换
2012/06/13 面试题
简短大学毕业感言
2014/01/18 职场文书
小学运动会班级口号
2014/06/09 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
护理医院见习报告
2014/11/03 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python