基于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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
JS判断数组那点事
2017/10/10 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python中的魔法方法深入理解
2014/07/09 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python自动登录QQ的实现示例
2020/08/28 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
材料化学应届生求职信
2013/10/09 职场文书
计算机应用与科学个人的自我评价
2013/11/15 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
超市开店计划书
2014/09/15 职场文书
监考失职检讨书
2015/01/26 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
飞屋环游记观后感
2015/06/08 职场文书