當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
纯javascript 幻灯片
生活随笔
收集整理的這篇文章主要介紹了
纯javascript 幻灯片
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果描述：就是圖片變換，鼠標(biāo)懸浮停滯，移開繼續(xù)變換，圖片帶連接。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> </head><body> <script>var links = new Array(); //修改點1: 設(shè)置多少個鏈接 與下面的圖片個數(shù)對應(yīng) links[1] = "http://blog.kpa7.net"; //廣告圖1 對應(yīng)的超鏈接 links[2] = "http://blog.kpa7.net"; //廣告圖2 對應(yīng)的超鏈接 links[3] = "http://blog.kpa7.net"; //廣告圖3 對應(yīng)的超鏈接 links[4] = "http://blog.kpa7.net"; //廣告圖4 對應(yīng)的超鏈接var imgs = new Array(); //修改點2: 設(shè)置圖片個數(shù)for(var n = 1; n <= 5; n++) imgs[n] = new Image();imgs[1].src = "images/1.jpg"; //廣告圖片1 imgs[2].src = "images/2.jpg"; //廣告圖片2 imgs[3].src = "images/3.jpg"; //廣告圖片3 imgs[4].src = "images/4.jpg"; //廣告圖片4var tits = new Array(); //修改點3: 設(shè)置標(biāo)題的個數(shù) 與上面的圖片個數(shù)對應(yīng) 因扒丟了標(biāo)題樣式 所以此處可忽略 tits[1] = "廣告圖片1 標(biāo)題"; //圖片1 標(biāo)題 tits[2] = "廣告圖片2 標(biāo)題"; //圖片2 標(biāo)題 tits[3] = "廣告圖片3 標(biāo)題"; //圖片3 標(biāo)題 tits[4] = "廣告圖片4 標(biāo)題"; //圖片4 標(biāo)題//修改點3: 設(shè)置圖片顯示的高度var imgwidth = 133; //圖片寬度var imgheight = 200; //圖片寬度var str = "<style type='text/css'>";str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";str += "</style>";str += "<div style='position:relative'>";str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' οnmοuseοver='Pause(true)' οnmοuseοut='Pause(false)'></a></div>";//修改點4：循環(huán)添加內(nèi)層div內(nèi)容以增加個數(shù) 與圖片個數(shù)對應(yīng) str += "<div id='imgnv'><div id='it1' class='on' οnmοuseοver='ImgSwitch(1, true)' οnmοuseοut='Pause(false)'>1</div><div id='it2' class='off' οnmοuseοver='ImgSwitch(2, true)' οnmοuseοut='Pause(false)'>2</div><div id='it3' class='on' οnmοuseοver='ImgSwitch(3, true)' οnmοuseοut='Pause(false)'>3</div><div id='it4' class='off' οnmοuseοver='ImgSwitch(4, true)' οnmοuseοut='Pause(false)'>4</div></div>";str += "<div id='titnv'><b>" + tits[1] + "</b></div>";str += "</div>";document.write(str);var oi = document.getElementById("dimg");var pause = false;var curid = 1;var lastid = 1;var sw = 1;var opacity = 100;var speed = 15;var delay = (document.all)? 400:700;function SetAlpha(){if(document.all){if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;}else{oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;}}function ImgSwitch(id, p){if(p){pause = true;opacity = 100;SetAlpha();}oi.src = imgs[id].src;document.getElementById("dlink").href = links[id];document.getElementById("it" + lastid).className = "off";document.getElementById("it" + id).className = "on";document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";curid = lastid = id;}function ScrollImg(){if(pause && opacity >= 100) return;if(sw == 0){opacity += 2;if(opacity > delay){ opacity = 100; sw = 1; }}if(sw == 1){opacity -= 3;if(opacity < 10){ opacity = 10; sw = 3; }}SetAlpha();if(sw != 3) return;sw = 0;curid++;//修改點5：這里的4也是個數(shù) 與圖片個數(shù)對應(yīng)if(curid > 4) curid = 1;ImgSwitch(curid, false);}function Pause(s){pause = s;}function StartScroll(){setInterval(ScrollImg, speed);}function CheckLoad(){if (imgs[1].complete == true && imgs[2].complete == true) {clearInterval(checkid);setTimeout(StartScroll, 2000);}}var checkid = setInterval(CheckLoad, 10);</script> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/wanghaibin/articles/2983907.html
總結(jié)
以上是生活随笔為你收集整理的纯javascript 幻灯片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Chapter11-RMAN Backu
- 下一篇： 手把手教你实现SVM算法（二）