<!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="圖片上傳預(yù)覽" width="750" height="500" /> </a></li>??<li><a href="圖片地址"> <img src="圖片地址" alt="多級聯(lián)動菜單" 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="數(shù)據(jù)延遲加載" 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(){//設(shè)置按鈕樣式???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, 創(chuàng)建于 10-1-26 */google_ad_slot = "8648094726";google_ad_width = 728;google_ad_height = 90;//--></script></body></html>
- 1 回答
- 0 關(guān)注
- 400 瀏覽
添加回答
舉報
0/150
提交
取消