<!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>
添加回答
举报
0/150
提交
取消