정말 초보입니다...입사 2개월차인데, 사수가 없어.. 항상 멘붕상태입니다 ㅠㅠ 부디 자비를 베푸시어 불쌍한 중생을 살려주세요 ㅠㅠ

 

 

위사이트 보시면 롤링으로 이미지들이 슬라이드 되어 있는데요

 

이미지 밑에 화살표 <- -> 있자나요 이 화살표를 mousedown 하거나 hover 되면 속도가 빨리 되게(이미지가 빨리 지나가게 휙~휙~ ) 구현하고 싶습니다ㅜㅜ

 

마우스를 떼면 다시 이전 속도로 돌아오고요...

 

자바스크립트.. 체계적으로 공부할만한 사이트나 정보도 공유 부탁드려요 ㅠㅠ

 

#backgroundPopup{
display:none;
position:absolute;
height:1050px;
width:620px;
top:300;
left:500;
border:0px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:absolute;
height:200px;
width:300px;
border:0px solid #cecece;
z-index:2;
padding:50px,0px,0px,180px;
}

#popupContactClose{
font-size:14px;
line-height:14px;
left:470px;
top:54px;
position:absolute;
color:white;
display:block;
}
#popup1{
}
</style>

<!-- 제이쿼리 화면이동 헤더 시작 -->
<script>
$(function() {
 var rollingDiv = $("#rollingHead1"); 
 rollingDiv.rolling("right", 280, 250, 4); // 이동방향 , 테이블width , 테이블 height , 보여질 이미지 갯수
 rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_TF3gcVNj_metro.jpg' width='233' height='214' alt='' id='popup1' border='0' /></a></td></tr></table></div>"); //열었으면 닫아야지
 rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_fcep15n9_ubline.jpg' width='233' height='214' alt='' id='popup2' border='0'/></a></td></tr></table></div>");
 rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_cP9zTOya_evernet.jpg' width='233' height='214' alt='' id='popup3' border='0'/></a></td></tr></table></div>");
 rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_4RiH3uDb_selah.jpg' width='233' height='214' alt='' id='popup4' border='0'/></a></td></tr></table></div>");
 rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_SMjIqowu_biz.jpg' width='233' height='214' alt='' id ='popup5' border='0'/></a></td></tr></table></div>");

  rollingDiv.bind("mouseover", function() { 
  rollingDiv.stopRolling();
  });
  rollingDiv.bind("mouseout", function() {  
  rollingDiv.resumeRolling();
  });

 

   var leftArrowDiv = $("#rollingHead2");
   leftArrowDiv.css("opacity", 0.5);
  leftArrowDiv.hover(function() {
   leftArrowDiv.animate({
    opacity: 0.9
   }, 10);
   if (rollingDiv.getRollingDirection() == "left") {
      rollingDiv.reverseRolling();
     }
  rollingDiv.resumeRolling();
  }, function() {
    leftArrowDiv.animate({
    opacity: 0.5
   }, 10);
  });
  
  var rightArrowDiv = $("#rollingHead3");
  rightArrowDiv.css("opacity", 0.5);
  rightArrowDiv.hover(function() {
   rightArrowDiv.animate({
    opacity: 0.9
   }, 10);    

   if (rollingDiv.getRollingDirection() == "right") {
      rollingDiv.reverseRolling();
     }
     rollingDiv.resumeRolling();
  }, function() {
      rightArrowDiv.animate({
    opacity: 0.5
   }, 10);
  }); 
  

 rollingDiv.startRolling(30, 0, 100);
 setTimeout('normal()', 1000); });

function normal() {
  var rollingDiv = $("#rollingHead1");
  var rollingAnimationFrame = rollingDiv.getRollingAnimationFrame();
  if (rollingAnimationFrame != 100) {
   rollingAnimationFrame += 20;
   if (rollingAnimationFrame > 100) {
    rollingAnimationFrame = 100;
   }
   rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
  }
 setTimeout('normal()', 1000); 
} 

</script>

 

<script>
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
 //loads popup only if it is disabled
 if(popupStatus==0){
  $("#backgroundPopup").css({
   });
  $("#backgroundPopup").fadeIn("slow");
  $("#popupContact").fadeIn("slow");
  popupStatus = 1;
 }
}

//disabling popup with jQuery magic!
function disablePopup(){
 //disables popup only if it is enabled
 if(popupStatus==1){
  $("#backgroundPopup").fadeOut("slow");
  $("#popupContact").fadeOut("slow");
  popupStatus = 0;
 }
}

//centering popup
function centerPopup(){
 //centering
 $("#popupContact").css({
  "position": "absolute",
  "top":300,
  "left":200
 });
}

 

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){
 //LOADING POPUP
 //Click the button event!
 $("#popup1").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup(); // 메트로
  document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_MfrZxWtV_B8B6BBEAB8DEC6AEB7CEBDC3C6BC.jpg' id='reset' width=567 height=732></td></tr></table>";
  
 });
 $("#popup2").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup(); // 유비라인
  document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_T9E8NeJR_C0AFBAF1B6F3C0CE.jpg' id='reset' width=567 height=672></td></tr></table>";
 });
 $("#popup3").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup(); // 에버넷
  document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><br /><img src='/data/file/portpolio/3076664668_NvGZUuDR_BFA1B9F6B3DD.jpg' id='reset' width=567 height=1000></td></tr></table>";
 });
 $("#popup4").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup(); // 세라
  document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_2NafGbPg_C2F9BEE7B3AAB6F3.jpg' id='reset' width=567 height=727></td></tr></table>";
 });
 $("#popup5").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup(); // 비즈앤 몰드
  document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><br /><img src='/data/file/portpolio/3076664668_D3kcKZxQ_BAF1C1EEBFA3B8F4B5E5BAEAB7CEB8B6C0CCB5E52.jpg' id='reset' width=567 height=871></td></tr></table>";
 });
 
 

 //CLOSING POPUP
 //Click the x event!
 $("#popupContactClose").click(function(){
  disablePopup();
 });
 //Click out event!
 $("#backgroundPopup").click(function(){
  disablePopup();
 });
 //Press Escape event!
 $(document).keypress(function(e){
  if(e.keyCode==27 && popupStatus==1){
   disablePopup();
  }
 });
});
</script>

<!-- 제이쿼리 화면이동 헤더 끝 -->

<div id="popupContact"></div>
<div id="backgroundPopup"><a id="popupContactClose"><b>x</b></a></div>
<div id="popupContact2"></div>
<div id="backgroundPopup2"><a id="popupContactClose2"><b>x</b></a></div>

 

 

<body>

<table width="1200" border="0">
 <tr>
  <td height="80"> </td>
 </tr>
 <tr>
  <td>
   <center>
   <div id="rollingHead1"></div>
   <p>
   </center>
  </td>
 </tr>
 <tr>
  <td height="1"> </td>
 </tr>
 <tr>
  <td>
   <table border=0 align="center">
  <td id="rollingHead2"><img src="/images/left.jpg"></td><td width=30> </td><td id="rollingHead3"><img src="/images/right.jpg"></td>
   </table>
  </td>
 </tr>
</table>