基于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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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/03/11 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python简单进程锁代码实例
2015/04/27 Python
MySQL最常见的操作语句小结
2015/05/07 Python
python实现文本文件合并
2015/12/29 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python 私有化操作实例分析
2019/11/21 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
物流仓管员工作职责
2014/01/06 职场文书
单位考核聘任报告
2015/03/02 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript