基于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的分页控件(C#)
Jan 06 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
Node.js使用Angular简单示例
May 11 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
JS如何生成随机验证码
Mar 02 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中的一个中文字符串截取函数
2007/02/14 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
劳动竞赛活动方案
2014/02/20 职场文书
公共场所禁烟标语
2014/06/25 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书