JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술

사실 이 코드는 약간의 중복을 발생시킵니다... 별도의 Slider 클래스를 작성하여 첫 번째 버전으로 저장하는 것이 좋습니다. 시간이 있으면 별도의 Slider 클래스를 작성해 보세요

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> #container { height:200px;_height:198px;width:385px;border:1px solid #CCCCCC; } #container #content{ height:200px;width:370px;float:left;overflow:hidden; } #container #content div{ margin-top:4px;margin-left:4px;height:16px;font-size:14px;color:#666666;width:100%; } #container #scroll{ height:200px;width:15px;float:right; } .b1{width:600px; height:23px; background-image:url(/upload/2010-3/20100311163933339.gif)} /*=========================================================*/ #container1 { height:200px;width:400px;_width:398px;border:1px solid #999999; } #container1 #content1{ height:180px;width:400px;overflow:hidden; } #container1 #content1 td{ height:180px;width:200px; } #container1 #content1 td img{ height:180px;width:200px; } #container1 #scroll1{ height:20px;width:400px; } #container1 #scroll1 #block1{ width:20px;height:20px;background-color:#990000;position:absolute; } /*====================================================================*/ table div{height:20px; font-size:13px; margin-top:5px; color:#333333; font-weight:bold} table img{height:160px; width:200px;} /*====================================================================*/ .b2{background-image:url(/upload/2010-3/20100311163933545.gif); width:26px; height:34px;} .b2-1{background:transparent url(/upload/2010-3/20100311163934864.gif) no-repeat scroll center center; width:20px; height:161px; margin-left:4px;} .b2-2{background-image:url(/upload/2010-3/20100311163934603.gif); height:22px; width:20px; position:absolute} .b2-3{background-image:url(/upload/2010-3/20100311163934887.gif); width:26px; height:34px;} /*====================================================================*/ .b3{ width:840px; height:216px;border:2px solid #b50000;} .b3-1{width:740px; height:216px; margin:0 auto; } .b3-2{height:180px; width:100%; overflow:hidden;} .b3-l1{height:auto; width:660px;margin:0 auto;} .b3-l2{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:30px; background-position:-182px 0px; float:left; } .b3-l3{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif);height:20px; width:600px; background-position:0px -226px; float:left;} .b3-l4{background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute} .b3-l5{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:30px; background-position:-216px 0px; float:left;} /*====================================================================*/ .b4-1{font-size:0px; height:17px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-15px 0; margin:0px;} .b4-2{font-size:0px; height:166px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-30px 0; } .b4-3{font-size:0px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-45px 0; position:absolute; height:17px; width:15px; } .b4-4{font-size:0px; height:17px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:0 0;margin:0px;} /*====================================================================*/ .b5-1{background:url(/upload/2010-3/20100311163934971.jpg) no-repeat; width:550px; height:520px; padding:1px;} .b5-2{height:350px; width:300px; margin-left:50px; margin-top:50px;} .b5-3{ margin-top:10px; margin-left:5px; height:330px; width:260px; font-size:14px;; color:#054c68; float:left; overflow:hidden} .b5-4{font-size:16px; font-weight:bold} .b5-5{float:right; margin-right:12px; margin-top:10px; height:330px; width:15px; } .b5-6{position:absolute; height:10px; line-height:10px; width:15px; background-color:#c6e7f4;} </style> <div id="a1" class="b1"> <img id="block1" src="/upload/2010-3/20100311163934505.gif" style="max-width:90%" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </div> <div id="info1">0%</div> <div> <div class="b2"></div> <div id="a2" class="b2-1"> <div id="block2" class="b2-2"></div> </div> <div class="b2-3"></div> </div> <div id="info2">0%</div> <div class="b3"> <div id="a3" class="b3-1"> <div class="b3-2"> <table width="1680" height="180" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="210" align="center"> <img src="/upload/2010-3/20100311163955721.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://files.jb51.net/upload/2010-3/20100311163956292.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://files.jb51.net/upload/2010-3/20100311163956843.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://files.jb51.net/upload/2010-3/20100311163956806.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://files.jb51.net/upload/2010-3/20100311163956181.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://comic.qq.com/images/comic/2008/10/13/gpt/5.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://files.jb51.net/upload/2010-3/20100311163956254.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> <td width="210" align="center"> <img src="http://files.jb51.net/upload/2010-3/20100311163956721.jpg" alt="JavaScript 시뮬레이션 스크롤 막대 구현 code_javascript 기술" > </td> </tr> </table> </div> <div class="b3-l1"> <div id="la" class="b3-l2"></div> <div id="scroll3" class="b3-l3"> <div id="block3" class="b3-l4"></div> </div> <div id="r" class="b3-l5"></div> </div> </div> </div> <div id="container"> <div id="content"> <div></div> </div> </div>