Asp.net MVC 实现数据库读取显示轮播图
2020-03-08 14:37
1211 查看
实现结果:
具体实现: 前台js方法实现: <script> var keyValue = $.request("keyValue"); $(function () { if (!!keyValue) { $.ajax({ url: "/OpticalManage/OpticWell/GetImageJson", data: { keyValue: keyValue }, dataType: "json", async: false, success: function (data) { $.each(data, function (index, item) { if (item.picture_url != undefined) { var dts = item.picture_url.split(','); $.each(dts, function (i, items) { $("#slidesImgs").append(' <li><img width="860" height="430" alt="" src="/upload/marker/' + items + '" /></li>'); var scount = 0; var snum = parseInt(i); scount += snum + 1; if (i == "0") { $("#image2").append('<li class="on">' + scount + '</li>'); } else { $("#image2").append('<li>' + scount + '</li>'); } }); } }); } }); } SlideShow(1000); }); </script> <!-- 代码 开始 --> <div class="comiis_wrapad" id="slideContainer"> <div id="frameHlicAe" class="frame cl"> <div class="temp"></div> <div class="block"> <div class="cl"> <ul class="slideshow" id="slidesImgs"></ul> </div> <div class="slidebar" id="slideBar"> <ul id="image2"></ul> </div> </div> </div> </div> <!-- 代码 结束 --> ======================================================== 上面图片根据后台代码进行编写 后台代码: 取 item.picture_url (url 地址),sql查询 后台代码实现: //查看图片 public ActionResult GetImageJson(string keyValue) { StringBuilder sb = new StringBuilder(); sb.AppendFormat("select picture_url from Optic_Well where F_Id='{0}'",keyValue); var data = dbbase.getDataSet(sb.ToString()).Tables[0]; return Content(data.ToJson()); } ---------------------------------------------------下面是 具体的css和js,添加引用即可-名字自己取------------------------------- ============css样式开始====================== * { word-wrap: break-word; } body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; } body, ul, li { margin: 0; padding: 0; } ul li { list-style: none; } a { color: #000; text-decoration: none; } a:hover { text-decoration: underline; } a img { border: none; } .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; } .frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; } .title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; } .block { margin: 10px 10px 0; } .slideshow { clear: both; } .slideshow li { position: relative; overflow: hidden; } .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; } .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; } .slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; } .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; } ul, li { list-style: none; } a:hover { text-decoration: underline; color: #a50001; } .frame { background: none; border: 0px solid #fff; margin-bottom: 0px; } .slidebar { position: absolute; top: 5px; left: 4px; } .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; } .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #ff0; font-weight: 700; } .slideshow SPAN.title { text-indent: 0px; } .block { margin: 0;position: relative; } #frameHlicAe { margin: 0px !important; border: 0px !important; } .comiis_wrap960, .comiis_wrapad { margin: 0 auto; width: 960px; } .comiis_wrapad { margin-top: 10px; } .comiis_wrapad { overflow: hidden; } .comiis_wrapad img { float: left; margin-top: 0px; } #slidesImgs li { width: 860px; height: 430px; display:none; } ============css样式结束====================== ============js样式开始====================== function SlideShow(c) { var a = document.getElementById("slideContainer"), f = document.getElementById("slidesImgs").getElementsByTagName("li"), h = document.getElementById("slideBar"), n = h.getElementsByTagName("li"), d = f.length, c = c || 3000, e = lastI = 0, j, m; function b() { m = setInterval(function () { e = e + 1 >= d ? e + 1 - d : e + 1; g() }, c) } function k() { clearInterval(m) } function g() { f[lastI].style.display = "none"; n[lastI].className = ""; f[e].style.display = "block"; n[e].className = "on"; lastI = e } f[e].style.display = "block"; a.onmouseover = k; a.onmouseout = b; h.onmouseover = function (i) { j = i ? i.target : window.event.srcElement; if (j.nodeName === "LI") { e = parseInt(j.innerHTML, 10) - 1; g() } }; b() } ; ============js样式结束======================
转载于:https://www.cnblogs.com/gxwa/p/8026259.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- asp.net mvc 从数据库中读取图片的实现代码
- asp.net mvc 从数据库中读取图片的实现代码
- asp.net mvc DropDownList 不从数据库取数据显示
- Asp.net 2.0(C#)图片存储到数据库和从数据库读取显示
- asp.net mvc 中利用jquery datatables 实现数据分页显示
- Asp.net中图片存储数据库以及页面读取显示通用方法详解-附源码下载
- ASP加javascript实现图片轮流显示(图片路径从数据库中读取)
- ASP.NET(C#)中使数据库中读取的文本换原格式显示的函数
- Asp.net 2.0(C#)图片存储到数据库和从数据库读取显示
- 搭建你的Spring.Net+Nhibernate+Asp.Net Mvc 框架 (三)实现数据库接口层和业务逻辑层
- ASP.NET 中实现 读取数据库二进制word并下载
- asp.net中将图片或文件存入数据库并读取显示在image控件中
- 关于在ASP.NET MVC 中使用EF的Code First的方式来读取数据库时的Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.
- NoSql-MongoDB GridFS+ASP.NET MVC实现上传,显示
- ASP.NET MVC实现图片上传、图片预览显示
- ASP.NET MVC Linq to SQL 实现数据库增删改(源代码) ASP.NET MVC 分页控件
- asp.net mvc 2.0 简单的上传图片到数据库和显示图片
- ASP.NET 上传图片至数据库并读取图片显示
- asp.net MVC 显示数据库中的html 代码
- 实现ASP.NET数据库图片上传与读取的功能