基于Bootstrap框架实现图片切换
程序员文章站
2022-07-10 13:30:40
准备图片,把相关记录添加至数据库表中:
创建一个存储过程,获取所有记录:
在asp.net mvc专案中,部署bootstrap环境......
然后...
准备图片,把相关记录添加至数据库表中:
创建一个存储过程,获取所有记录:
在asp.net mvc专案中,部署bootstrap环境......
然后创建一个model:
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:
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>(); } } }
设置图片切换速度:
view视图:
<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框架实现图片切换,希望对大家有所帮助
推荐阅读
-
基于WebUploader实现单图片和多图片上传,上传回显,编辑加载,图片删除,位置切换以及基于PhotoSwipe框架的图片预览功能
-
基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理_html/css_WEB-ITnose
-
ajax与iframe框架实现图片文件上传(图文详解)
-
一个基于jquery的图片切换效果_jquery
-
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
-
基于Jquery实现的一个图片滚动切换_jquery
-
基于jQuery的360图片展示实现代码
-
基于IDEA实现SSM整合框架的搭建配置流程
-
推荐6款基于jQuery实现图片效果插件
-
基于jQuery实现图片的前进与后退功能