前台代码：
@{
Layout = null;
}
<!DOCTYPE html>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/SlideTrans.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片滑动切换效果</title>
<script src="SlideTrans.js"></script>
</head>
<body>
<style type="text/css">
.container, .container img{width:371px; height:300px;}
.container img{border:0;vertical-align:top; text-align:center;}
</style>
<script>
new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run();
</script>
<br />
<style type="text/css">
.container ul, .container li{list-style:none;margin:0;padding:0;}
.num{ position:absolute; right:5px; bottom:5px; font:12px/1.5 tahoma, arial; height:18px;}
.num li{
float: left;
color: #d94b01;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 11px;
cursor: pointer;
margin-left: 3px;
border: 1px solid #f47500;
background-color: #fcf2cf;
}
.num li.on{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
margin-top:-2px;
background-color: #ff9415;
font-weight: bold;
color:#FFF;
}
</style>
<div style=" text-align:center">
<img src="~/Image/head.png" style="text-align:center"/>
</div>
<div>
<img src="~/Image/链接.png"/>
</div>
<div style="width:800px; height:750px;margin-left: auto;margin-right: auto;">
<div style="float:left">
<img src="~/Image/content.png"/>
</div>
<div class="container" id="idContainer2" style="float:right;border:2px solid green">
<ul id="idSlider2">
@*<li><a href="http://www.baidu.com"> <img src="~/Image/1.jpg" alt="图片1" /> </a></li>
<li><a href="http://www.baidu.com"> <img src="~/Image/2.jpg" alt="图片2" /> </a></li>
<li><a href="http://www.baidu.com"> <img src="~/Image/3.jpg" alt="图片3" /> </a></li>
<li><a href="http://www.baidu.com"> <img src="~/Image/4.jpg" alt="图片4" /> </a></li>*@
@foreach (var item in ViewData["srcs"] as List<string>)
{
<li><a href="http://www.baidu.com"> <img src="@item.ToString()" alt="@item.ToString()" /> </a></li>
}
</ul>
<ul class="num" id="idNum">
</ul>
</div>
<div style="float:right; text-align:center">
<img src="~/Image/news.png" style="text-align:center"/>
</div>
<br />
@*<div style="float:right;">
<input id="idAuto" type="button" value="停止" />
<input id="idPre" type="button" value="<<" />
<input id="idNext" type="button" value=">>" />
<select id="idTween">
<option value="0">默认缓动</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>
</div>*@
</div>
<script>
var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,
st = new SlideTrans("idContainer2", "idSlider2", n, {
onStart: function () {//设置按钮样式
forEach(nums, function (o, i) { o.className = st.Index == i ? "on" : ""; })
}
});
for (var i = 1; i <= n; AddNum(i++)) { };
function AddNum(i) {
var num = $$("idNum").appendChild(document.createElement("li"));
num.innerHTML = i--;
num.onmouseover = function () {
timer = setTimeout(function () { num.className = "on"; st.Auto = false; st.Run(i); }, 200);
}
num.onmouseout = function () { clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }
nums[i] = num;
}
st.Run();
$$("idAuto").onclick = function () {
if (st.Auto) {
st.Auto = false; st.Stop(); this.value = "自动";
} else {
st.Auto = true; st.Run(); this.value = "停止";
}
}
$$("idNext").onclick = function () { st.Next(); }
$$("idPre").onclick = function () { st.Previous(); }
$$("idTween").onchange = function () {
switch (parseInt(this.value)) {
case 2:
st.Tween = Tween.Bounce.easeOut; break;
case 1:
st.Tween = Tween.Back.easeOut; break;
default:
st.Tween = Tween.Quart.easeOut;
}
}
</script>
<br />
</body>
</html>
后台代码：
public ActionResult Test()
{
string[] srcs = Directory.GetFiles(Server.MapPath(@"/Image"));
List<string> listsrcs = new List<string>();
foreach (var item in srcs)
{
if (item.Contains(".jpg"))
{
listsrcs.Add("/Image/" + Path.GetFileName(item));
}
}
ViewData["srcs"] = listsrcs;
return View();
}
图片特效js包下载地址：http://www.mycodes.net/146/2.htm
