基于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单例模式的简单实现方法
Jul 25 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue实现简单图片上传
Jun 30 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
第九节--绑定
2006/11/16 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
Add a Table to a Word Document
2007/06/15 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
分页栏的web标准实现
2011/11/01 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
厂长岗位职责
2014/02/19 职场文书
闭幕式主持词
2014/04/02 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
天下第一关导游词
2015/02/06 职场文书