您的位置:首页 > 编程语言 > ASP

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

  • 点赞
  • 收藏
  • 分享
  • 文章举报
ala68965 发布了0 篇原创文章 · 获赞 0 · 访问量 128 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: