JS实现模拟FLASH幻灯片图片切换网页特效_Gulp/Grunt/webpack

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Gulp/Grunt/webpack

JS实现模拟FLASH幻灯片图片切换网页特效

夜鹰教程网来源：www.yyjcw.com 日期：2016-10-27 16:40:25

只要完成#flashBox的XHTML的代码设计，以及和其相关的CSS设计，然后直接调用new flashBoxCtrl("flashBox")，便可实现效果。构造函数里只要调入需要生成幻灯效果的ID，便能轻松实现。

只要完成#flashBox的XHTML的代码设计，以及和其相关的CSS设计，然后直接调用new flashBoxCtrl("flashBox")，便可实现效果。构造函数里只要调入需要生成幻灯效果的ID，便能轻松实现。同时，数字标签由对象计算后自动生成，无需手工操作，所有的工作都隐藏在对象内部，对外只需要调用构函数去不断地构建对象

<!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" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <meta name="author" content="RainoXu" /> <title>flash幻灯</title> </head> <body> <style type ="text/css"> /* <![CDATA[ */ ul,li{ padding:0; margin:0; list-style:none; } #flashBox{ width:346px; height:186px; border:1px solid #EEE; position:relative; } #flashBox img{ /*初始不要显示*/ display:none; /*用边框来实现空位，因为margin和paading有时会引起些麻烦*/ border:3px solid #FFF; } #flashBox ul{ position:absolute; right:7px; bottom:9px; font:9px tahoma; } #flashBox ul li{ display:block; float:left; width:12px; height:12px; line-height:12px; margin-right:3px; border:1px solid #999; background:#F0F0F0; text-align:center; cursor:pointer; } #flashBox ul li.hover{ border-color:red; background:#FFE1E1; color:red; } /* ]]> */ </style> <script type="text/javascript"> function flashBoxCtrl(o){ this.obj=document.getElementById(o); //这个私有方法虽然写了，但暂时没用到 function addListener(ele,eventName,functionBody){ if (ele.attachEvent){ ele.attachEvent("on"+eventName, functionBody); }else if (ele.addEventListener){ ele.addEventListener("on"+eventName,functionBody, false); }else{ return false; } } //初始化 this.init=function(){ var objImg=this.obj.getElementsByTagName("img"); var tagLength=objImg.length; if (tagLength>0){ var oUl=document.createElement("ul"); oUl.setAttribute("id",o+"numTag"); for (var i=0;i<tagLength;i++){ var oLi=oUl.appendChild(document.createElement("li")); if (i==0){ oLi.setAttribute("class","hover"); //初始化时把第一个设置为高亮 oLi.setAttribute("className","hover"); } //设置标签的数字 oLi.appendChild(document.createTextNode((i+1))); } this.obj.appendChild(oUl); objImg[0].style.display="block"; //设置标签事件 var oTag=this.obj.getElementsByTagName("li"); for (var i=0;i<oTag.length;i++){ oTag[i].onmouseover=function(){ for (j=0;j<oTag.length;j++){ oTag[j].className=""; objImg[j].style.display="none"; } this.className="hover"; objImg[this.innerHTML-1].style.display="block"; } } } }; //自动滚动的方法还没写 this.imgRoll=function(){}; //生成对象时自动加载init()方法以初始化对象 this.init(); } </script> <div id="flashBox"> <img src="http://www.webjx.com/files/090726/1_124746.jpg" /> <img src="http://www.webjx.com/files/090726/1_124755.jpg" /> <img src="http://www.webjx.com/files/090726/1_124807.jpg" /> <img src="http://www.webjx.com/files/090726/1_124813.jpg" /> </div> <script type="text/javascript"> //生成一个对象 new flashBoxCtrl("flashBox"); </script> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

复制链接网友评论收藏本文关闭此页

上一条：设计理论:可用性设计的10个准则下一条：非主流ps教程实用的几种技巧汇总

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网