Dreamweaver如何利用JS实现Flash幻灯片效果

  • 来源: 互联网   2016-04-12/16:34
  •  Flash的幻灯片效果可能是网站中使用频率最多的一种效果,其实用JS也可以实现这种效果,而且功能一点不差,只需要将下面这段JS的幻灯片效果代码复制到网页中就能实现,而且宽度和高度修改起来比Flash更简单,如果你不会Flash的话,那使用JS是很好的选择。

    调用方法:new flashBoxCtrl("flashBox");

     

    <!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="/upimg/allimg/090726/a.jpg" _fcksavedurl="/upimg/allimg/090726/a.jpg" />
    <img src="/upimg/allimg/090726/b.jpg" _fcksavedurl="/upimg/allimg/090726/b.jpg" />
    <img src="/upimg/allimg/090726/c.jpg" _fcksavedurl="/upimg/allimg/090726/c.jpg" />
    <img src="/upimg/allimg/090726/d.jpg" _fcksavedurl="/upimg/allimg/090726/d.jpg" />
    </div>
    <script type="text/javascript">
    //生成一个对象
    new flashBoxCtrl("flashBox");
    </script>
    </body>
    </html>

    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多