看了许多jquery的幻灯片,自己也想学着弄一个,简单是简单了一点。不过研究过,还是比较安慰的啦,
以下代码并未在生产环境中使用过,如果您要在生产环境中使用,请慎重
/*
slide(FrameId, FrameWidth, FrameHeight, UlId, isshow,Intervaltime)
外层对象ID,外层宽度,外层高度,内层ID,是否显示半透明层,切换时间间隔
*/
function slide(FrameId, FrameWidth, FrameHeight, UlId, isshow, Intervaltime) {
var index = 0;
var count = -1;
//设置图片切换动画
function setlistatus() {
$("#" + FrameId + " #" + UlId + " li").fadeOut("slow");
$("#" + FrameId + " .ulorder li").removeClass("on")
$("#" + FrameId + " #" + UlId + " li:eq(" + index + ")").fadeIn("slow");
$("#" + FrameId + " .ulorder li:eq(" + index + ")").addClass("on");
index++;
if (index >= count) {
index = 0;
}
if (isshow) {
var _href = $("#" + FrameId + " #" + UlId + " li:eq(" + index + ") a").attr("href");
var _title = $("#" + FrameId + " #" + UlId + " li:eq(" + index + ") a").attr("title");
if (_title != null && _title != "" && _title != undefined) {
$("#" + FrameId + " .transparent").html("");
$("#" + FrameId + " .transparent").html("<a href='" + _href + "' title='" + _title + "'>" + _title + "</a>");
}
}
}
//初始化样式
function setStyle() {
var style = "<style type=\"text/css\">";
style += "#" + FrameId + " img{ border:0px;}";
style += "#" + FrameId + " ul,li{ padding:0px; margin:0px;}";
style += "#" + FrameId + "{height:" + FrameHeight + "px; width:" + FrameWidth + "px; overflow:hidden; border:5px #ccc solid;}";
style += "#" + FrameId + " li{list-style:none}";
style += "#" + FrameId + " .ulorder{ position:absolute;z-index:100;}";
style += "#" + FrameId + " .ulorder li{ cursor:pointer; float:left; font-weight:bold; padding:2px 5px; background-color:White; margin-right:5px; text-align:center}";
style += "#" + FrameId + " .ulorder .on{ background-color:Red; color:White}";
if (isshow) {
style += "#" + FrameId + " .transparent{padding-left:15px; height:50px; line-height:50px; background-color:black;position:absolute;z-index:50}";
style += "#" + FrameId + " .transparent a{ color:White}";
}
style += "</style>";
return style;
}
//初始化序号
function slideInit() {
count = $("#" + FrameId + " ul li").length;
//添加序号
var ulstr = "<ul class='ulorder'>"
for (var i = 1; i <= count; i++) {
ulstr += "<li>" + i + "</li>";
}
ulstr += "</ul>";
$("#" + FrameId).append(ulstr);
//为序号添加点击事件
$("#" + FrameId + " .ulorder li").bind("click",
function () {
index = $(this).index();
clearInterval(dingshi);
setlistatus();
dingshi = setInterval(setlistatus, Intervaltime);
});
var contentHeight = $("#" + FrameId).height() + $("#" + FrameId).position().top;
var contentWidth = $("#" + FrameId).width() + $("#" + FrameId).position().left;
var ulorderHeight = $("#" + FrameId + " .ulorder").height();
var ulorderWidth = $("#" + FrameId + " .ulorder").width();
$("#" + FrameId + " .ulorder").css("top", (contentHeight - ulorderHeight) + "px");
$("#" + FrameId + " .ulorder").css("left", (contentWidth - ulorderWidth) + "px");
if (isshow) {
//添加半透明 style='height:100px;width:" + FrameWidth + "px'
var transparent = "<div class=\"transparent\">";
transparent += "</div>";
$("#" + FrameId).append(transparent);
$("#" + FrameId + " .transparent").css('opacity', 0.6);
$("#" + FrameId + " .transparent").css('width', (FrameWidth - parseInt($("#" + FrameId+ " .transparent").css("padding-left"))) + "px");
var transparentHeight = $("#" + FrameId + " .transparent").height();
var transparentWidth = $("#" + FrameId + " .transparent").width();
var bordtop =parseInt($("#" + FrameId).css("border-top-width"));
$("#" + FrameId + " .transparent").css("top", (contentHeight - transparentHeight + bordtop) + "px");
$("#" + FrameId + " .transparent").css("left", ($("#" + FrameId).position().left + $("#" + FrameId).css("border-left-width")) + "px");
}
setlistatus();
var dingshi = setInterval(setlistatus, Intervaltime);
}
$("#" + FrameId).append(setStyle());
slideInit();
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Slide.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
slide("DuDuCMSRoll", 600, 417, "content", true,5000);
slide("Div1", 450, 300, "Ul1",false,3000);
}
);
</script>
</head>
<body>
<div id="DuDuCMSRoll">
<ul id="content">
<li><a href="http://www.baidu.com?id=1" title="kong">
<img alt="kong" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1247.jpg" /></a></li>
<li><a href="http://www.baidu.com?id=2" title="郊外风景图片下载">
<img alt="郊外风景图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic488.jpg" /></a></li>
<li><a href="http://www.baidu.com?id=3" title="高清养生少女图片下载">
<img alt="高清养生少女图片下载" src="http://pic.sc.chinaz.com/files/pic/pic7/pic3865.jpg" /></a></li>
<li><a href="http://www.baidu.com?id=4" title="不知道">
<img alt="不知道" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1763.jpg" /></a></li>
<li><a href="http://www.baidu.com?id=5" title="绿色叶子图片下载">
<img alt="绿色叶子图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic626.jpg" /></a></li>
</ul>
</div>
<div id="Div1">
<ul id="Ul1">
<li><a href="">
<img alt="kong" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1247.jpg" /></a></li>
<li><a href="">
<img alt="郊外风景图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic488.jpg" /></a></li>
<li><a href="">
<img alt="高清养生少女图片下载" src="http://pic.sc.chinaz.com/files/pic/pic7/pic3865.jpg" /></a></li>
<li><a href="">
<img alt="不知道" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1763.jpg" /></a></li>
<li><a href="">
<img alt="绿色叶子图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic626.jpg" /></a></li>
</ul>
</div>
</body>
</html>