基于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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 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的FTP学习(二)
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP中echo和print的区别
2014/08/28 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
Python字典简介以及用法详解
2016/11/15 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
中科方德软件测试面试题
2016/04/21 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
学生请假条
2014/04/11 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
心理健康活动总结
2014/04/30 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年路政工作总结
2015/05/22 职场文书
2015年学校总务工作总结
2015/07/20 职场文书