<!DOCTYPE html>
<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:750px; height:500px;}
.container img{border:0;vertical-align:top;}
</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 >
<ul >
<li><a href="图片地址"> <img src="图片地址" alt="图片上传预览" width="750" height="500" /> </a></li>
<li><a href="图片地址"> <img src="图片地址" alt="多级联动菜单" width="750" height="500" /> </a></li>
<li><a href="图片地址"> <img src="图片地址" alt="浮动定位提示" width="750" height="500" /> </a></li>
<li><a href="图片地址"> <img src="图片地址g" alt="数据延迟加载" width="750" height="500" /> </a></li>
<li><a href="图片地址"> <img src="图片地址" alt="简便文件上传" width="750" height="500" /> </a></li>
</ul>
<ul >
</ul>
</div>
<br />
<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 />
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0342339836871729";
/* 728x90, 创建于 10-1-26 */
google_ad_slot = "8648094726";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
</body>
</html>
凤凰求蛊