Asp.net MVC 实现数据库读取显示轮播图

实现结果：

具体实现：

前台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;  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;  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;  960px; }

.comiis_wrapad { margin-top: 10px; }

.comiis_wrapad { overflow: hidden; }

.comiis_wrapad img { float: left; margin-top: 0px; }

#slidesImgs li {  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样式结束======================