<div class="artical-content-bak main-content editor-side-new">
<div class="con editor-preview-side" id="result">
<p>今天学习了下 用javascript面向对象编程写轮播效果 上篇文章也是用javascript写轮播效果 但是感觉上代码很乱 所以今天也学习了下用面向对象编程写轮播效果！通用的写法是 先定义一个类 也就是构造函数！function Player(){},这样一个构造函数！定于相应的属性保存在此构造函数内，调用的方式是new Player()这样调用，但是我们都知道 每当实例化一个对象时候 那么有相对应的一个指针指向了一个prototype，构造函数和prototype没有任何关系 只有对象的实例一个指针指向了prototype！所以我们可以把所有的方法都保存在prototype中 ，有start（）轮播方法 ，Stop（）停止方法，invoke（）切换相应的位置的方法 但是这两个方法我们可以放在构造函数里面写 初始化下！你暂时这么多方法，构造函数参数有：hoverClass，lists,scrollImg,outTime,p_w_picpathHeight 等！下面的代码：</p>
<p> </p>
<pre class="blockcode"></pre>
<ol class="dp-xml"><li class="alt"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<span class="tag">></span> </li><li><span class="tag"><</span><span class="tag-name">html</span> <span class="attribute">xmlns</span>=<span class="attribute-value">"http://www.w3.org/1999/xhtml"</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span> </li><li><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">http-equiv</span>=<span class="attribute-value">"Content-Type"</span> <span class="attribute">content</span>=<span class="attribute-value">"text/html; charset=utf-8"</span> <span class="tag">/></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span>无标题文档<span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span> </li><li><span class="tag"><</span><span class="tag-name">style</span><span class="tag">></span> </li><li class="alt">ul,li{ list-style:none;} </li><li>.scrollImg{ width:400px; height:900px; position:absolute; top:0; left:0;} </li><li class="alt">.scrollImg a{ width:400px; height:300px; overflow:hidden; display:block;} </li><li>.scrollImg img{ border:none;} </li><li class="alt">.ScrollWrap{ width:400px; height:300px; overflow:hidden;margin:50px auto 0; position:relative;} </li><li>.lists{ height:20px; position:absolute; top:255px; right:10px; z-index:100;*top:270px;} </li><li class="alt">.lists li{ width:20px; height:20px; border:1px solid orange; background:#fff; float:left; margin-right:4px; display:inline; text-align:center; line-height:20px; color:orange; cursor:pointer; font-weight:700;} </li><li>.lists li.current{ height:24px; line-height:24px; background:orange; color:#fff; width:24px; margin-top:-2px;} </li><li class="alt"><span class="tag"></</span><span class="tag-name">style</span><span class="tag">></span> </li><li><span class="tag"><</span><span class="tag-name">script</span> <span class="attribute">src</span>=<span class="attribute-value">"base.js"</span> <span class="attribute">type</span>=<span class="attribute-value">"text/javascript"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">script</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span> </li><li> </li><li class="alt"><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span> </li><li> <span class="tag"><</span><span class="tag-name">div</span> <span class="attribute">class</span>=<span class="attribute-value">"ScrollWrap"</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name">div</span> <span class="attribute">class</span>=<span class="attribute-value">"scrollImg"</span><span class="tag">></span> </li><li> <span class="tag"><</span><span class="tag-name">a</span> <span class="attribute">href</span>=<span class="attribute-value">"#"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">img</span> <span class="attribute">src</span>=<span class="attribute-value">"p_w_picpath/01.jpg"</span> <span class="attribute">width</span>=<span class="attribute-value">"400"</span> <span class="attribute">height</span>=<span class="attribute-value">"300"</span><span class="tag">/></span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name">a</span> <span class="attribute">href</span>=<span class="attribute-value">"#"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">img</span> <span class="attribute">src</span>=<span cla |
|
转播
