2010년 6월 23일 수요일

이미지 슬라이더 nivo-slider

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> nivo-slider </TITLE>
</HEAD>
<link rel="stylesheet" href="./css/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.nivo.slider.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(window).load(function() {
 $('#slider').nivoSlider({
  effect:'sliceDownRight', //Specify sets like: "sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade"
  slices:15,
  animSpeed:500,
  pauseTime:3000,
  startSlide:0, //Set starting Slide (0 index)
  directionNav:true, //Next & Prev
  directionNavHide:false, //Only show on hover
  controlNav:false, //1,2,3...
  controlNavThumbs:false, //Use thumbnails for Control Nav
  controlNavThumbsFromRel:false, //Use image rel for thumbs
  controlNavThumbsSearch: '.jpg', //Replace this with...
  controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
  keyboardNav:false, //Use left & right arrows
  pauseOnHover:true, //Stop animation while hovering
  manualAdvance:false, //Force manual transitions
  captionOpacity:0.8, //Universal caption opacity
  beforeChange: function(){},
  afterChange: function(){},
  slideshowEnd: function(){} //Triggers after all slides have been shown
 });
});

//-->
</SCRIPT>
<BODY>
<div id="slider" style='width:743px'>
 <img src="01.jpg" alt="" />
 <img src="02.jpg" alt="" />
 <img src="03.jpg" alt="" />
 <img src="04.jpg" alt="" />
</div>
</BODY>
</HTML>