基于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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
VUE安装使用教程详解
Jun 03 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
js实现浏览器打印功能的示例代码
Jul 15 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 检查电子邮件函数(自写)
2014/01/16 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python中的常量和变量代码详解
2018/07/25 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python安装selenium包详细过程
2019/07/23 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python中的With语句的使用及原理
2020/07/29 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
yy婚礼主持词
2014/03/14 职场文书
合伙协议书范本
2014/04/21 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android