這個代碼是幫用戶做的,感覺還不錯因此織夢模板網分享出來給大家:
// 作者:m.survivalescaperooms.com// 網址:http://m.survivalescaperooms.com// 日期:2019-11-2// QQ:71260368// code:網頁底部懸浮廣告代碼,帶單獨關閉var fc_fw="800px"; //廣告寬度,單位px,如自適應寬度就改為100%;var fc_fh="100px"; //廣告高度,單位pxvar fc_fsrc=['http://m.survivalescaperooms.com/gg/ad1.png','http://www.1357vip.com/ad/ad2.png','http://m.survivalescaperooms.com/gg/1300ad.png'];//圖片地址[個數要和鏈接個數對應]var fc_fl=['http://m.survivalescaperooms.com/','http://www.tao2t.com/','http://www.1357vip.com/'];//圖片鏈接地址[個數要和圖片地址個數對應] //樣式document.writeln("<style type=/"text/css/">");document.writeln("*{margin:0;padding:0; list-style:none;}");document.writeln(".fc_foot{width:100%; position:fixed; bottom:0px; z-index_f:9999;}");document.writeln(".f_skyf{ width:"+fc_fw+"; height:"+fc_fh+"; margin:0px auto; position:relative; z-index_f:9000; overflow:hidden;}");document.writeln(".f_skyf ul{position:absolute; left:0; top:0; width:"+fc_fw+"; height:"+fc_fh+";}");document.writeln(".f_skyf ul li{ width:"+fc_fw+"; height:"+fc_fh+";}");document.writeln(".f_skyf ol{ position:absolute; right:5px; bottom:10px;}");document.writeln(".f_skyf ol li{width:15px; height:15px; line-height:15px; dispaly:inline-block; background:#ddd;border:1px solid #969591;border-radius:50%; color:#959490;float:left; margin-left:5px; font-size:10px; text-align:center;cursor:pointer;}");document.writeln(".f_skyf ul li img{width:"+fc_fw+"; height:"+fc_fh+";}");document.writeln(".f_skyf ol .on{background:#8F9E9E;color:#fff;}");document.writeln(".f_skyf .btn_closef{ position:absolute; width:38px; text-align:center; height:16px; line-height:16px; border:1px #bcbcbc solid; background-color:#d3d3d3; color:#666666; top:0; right:0; border-bottom-left-radius:6px; font-size:12px;filter:alpha(Opacity=50);-moz-opacity:0.7;opacity: 0.7;}");document.writeln("</style>");document.writeln("<div class=/"fc_foot/" id=/"fc_foot/">");document.writeln("<div class=/"f_skyf/" id=/"f_skyf/">");document.writeln("<ul id=/"f_str_f/">");for(var k = 0; k < fc_fsrc.length; k++){document.writeln("<li><a href=/""+fc_fl[k]+"/" target=/"_blank/"><img src=/""+fc_fsrc[k]+"/" /></a></li>");}document.writeln("</ul>");document.writeln("<ol id=/"flist_f/">");for(var h = 0; h < fc_fsrc.length; h++){ if(h==0){ document.writeln("<li class=/"on/">1</li>"); }else{ document.writeln("<li>"+(h+1)+"</li>"); }}document.writeln("</ol>");document.writeln("<span class=/"btn_closef/" id=/"btn_closef/">關閉X</span>");document.writeln("</div>");document.writeln("</div>"); var f_skyf = document.getElementById('f_skyf'),f_str_f = document.getElementById('f_str_f'), flist_f = document.getElementById('flist_f').getElementsByTagName('li'),index_f = 0,time_f = null; // 若果有在等待的定時器,則清掉 if(time_f){ clearInterval(time_f); time_f = null; } // 自動切換 time_f = setInterval(autoPlayfoot, 2000); // 定義并調用自動播放函數 function autoPlayfoot(){ index_f++; if(index_f >= flist_f.length){ index_f = 0; } changeImg(index_f); } // 定義圖片切換函數 function changeImg(curindex_f){ for(var j = 0; j < flist_f.length; j++){ flist_f[j].className = ""; //f_skyf.style.top=0; } // 改變當前顯示索引 flist_f[curindex_f].className = "on"; f_str_f.style.marginTop = -fc_fh.substring(0,fc_fh.length-2)*curindex_f + "px"; //高度 index_f = curindex_f; } // 鼠標劃過整個容器時停止自動播放 f_skyf.onmouseover = function(){ clearInterval(time_f); } // 鼠標離開整個容器時繼續播放至下一張 f_skyf.onmouseout = function(){ time_f = setInterval(autoPlayfoot, 2000); } // 遍歷所有數字導航實現劃過切換至對應的圖片 for (var i = 0; i < flist_f.length; i++){ flist_f[i].id = i; flist_f[i].onmouseover = function() { clearInterval(time_f); changeImg(this.id); } }var btn_closef = document.getElementById("btn_closef");var f_div_f = document.getElementById("fc_foot");btn_closef.onclick = function(){ if(f_div_f){ f_div_f.style.display = "none"; }}以上就是網頁底部手機(wap)端網頁底部漂浮固定懸浮廣告帶輪播特效代碼的全部內容,希望對大家的學習和解決疑問有所幫助,也希望大家多多支持武林網。新聞熱點
疑難解答