手机（wap）网页底部固定悬浮广告带轮播特效代码

// 作者：xycms
// 网址：http://wwww.jsxyidc.com
// 日期：2019-03-3
// QQ：364500483
// code：网页底部悬浮广告代码，带单独关闭var fc_fw="800px";  //广告宽度,单位px,如自适应宽度就改为100%;
var fc_fh="100px";    //广告高度,单位px
var fc_fsrc=['images/b1.jpg','images/b2.jpg','images/b3.jpg'];//图片地址[个数要和链接个数对应]
var fc_fl=['https://www.csdn.net/','https://www.csdn.net/','https://www.csdn.net/'];//图片链接地址[个数要和图片地址个数对应]//样式
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）网页底部固定悬浮广告带轮播特效代码相关推荐

HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖学生DW网页设计作业源码 web课程设计网页规划与设计大学生个人网站作业模板...
HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖学生DW网页设计作业源码 web课程设计网页规划与设计大学生个人网站作业模板
HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计
HTML5期末大作业:明星个人主页介绍网站设计--明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码H ...
HTML5期末大作业：动漫网站设计——福五鼠动漫(6页)带轮播特效高质量代码 HTML+CSS+JavaScript 毕设网页设计HTML
HTML5期末大作业:动漫网站设计--福五鼠动漫(6页)带轮播特效 HTML+CSS+JavaScript 大学生毕设网页设计HTML 学生网页课程设计期末作业下载 web网页设计制作成品常见网页设 ...
HTML5期末大作业：动漫网站设计——斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页 ...
学生网站模板HTML5+CSS大作业——明星薛之谦(7页面))带轮播特效
HTML5+CSS大作业--明星薛之谦(7页面))带轮播特效常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服 ...
HTML5+CSS大作业——明星薛之谦(7页面))带轮播特效
HTML5+CSS大作业--明星薛之谦(7页面))带轮播特效常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服 ...
基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
迪丽热巴明星7页面带轮播特效
详情介绍文件目录

手机（wap）网页底部固定悬浮广告带轮播特效代码

手机（wap）网页底部固定悬浮广告带轮播特效代码相关推荐

最新文章

热门文章