客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
实现结果： 具体实现：
前台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" >
<div >
<div class="temp"></div>
<div class="block">
<div class="cl">
<ul class="slideshow" ></ul>
</div>
<div class="slidebar" >
<ul ></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样式结束======================
|
请发表评论