web standard/layout2011. 12. 30. 11:32

이미지 자동슬라이드

<!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">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var RollingRcount = 1;
 var RollingRstatus = 1;
 jQuery().ready(function ($) {
 
  $("#mailRolling ul li.rollSelected").animate({width: '642'}, 400);
  setInterval(fn_Rolling,500);
 
  $("#mailRolling ul li").click(function(){
   if(!$(this).hasClass("rollSelected"))
   {
    RollingRstatus = 0;
    RollingRcount = parseInt($(this).attr("rel")) + 1;
    $("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
   
    $(this).animate({width: '642'}, 500).addClass("rollSelected");
    setTimeout(function(){RollingRstatus = 1;}, 5800);
   }
  });
 });

 function fn_Rolling()
 {
  if(RollingRstatus == 1)
  {
   jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
  
   var liNum = RollingRcount % 5; 
   jQuery("#mainRolling"+liNum).animate({width: '642'}, 500).addClass("rollSelected");
   //jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
 
   RollingRcount += 1;
  }
 } 
</script>


<style>
div#mailRolling {}
div#mailRolling ul{}
div#mailRolling ul li{float:left; width:80px;overflow: hidden;}
div#mailRolling ul li.rollSelected{}
div#mailRolling ul li img{cursor:pointer;}


</style>
</head>

<body>
<div class="visual_box" id="mailRolling">
    <ul>
     <li class="rollSelected" id="mainRolling0" rel="0"><img src="sm5_intro.flv_01.jpg" /></li>
     <li class="pdl2" id="mainRolling1" rel="1"><img src="sm5_intro.flv_01.jpg" /></li>
     <li class="pdl2" id="mainRolling2" rel="2"><img src="sm5_intro.flv_02.jpg" /></li>
     <li class="pdl2" id="mainRolling3" rel="3"><img src="sm5_intro.flv_03.jpg" /></li>
     <li class="pdl2" id="mainRolling4" rel="4"><img src="sm5_intro.flv_04.jpg" /></li>
     <li class="pdl2" id="mainRolling5" rel="5"><img src="sm5_intro.flv_05.jpg" /></li>
    </ul>
   </div>


</body>
</html>

저작자표시 비영리

'web standard > layout' 카테고리의 다른 글

상하스크롤시 따라다니는 박스(none script)  (0) 2010.11.10
레이아웃에 사용되는 두가지 속성 position 과 float  (0) 2008.07.29
layout (블로그형)  (0) 2008.07.29
layout  (0) 2008.07.29
Posted by 수라

티스토리툴바