이미지 자동슬라이드 쇼
페이지 정보
작성일13-02-06 14:40 조회2,661회관련링크
- 예제파일 808회 연결
본문
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>자동슬라이드쇼</title>
<link rel="stylesheet" type="text/css" href="/script/slide2/style.css" />
<script type="text/javascript" src="/script/slide2/script.js"></script>
</head>
<body>
<div id="wrapper">
<div>
<div class="sliderbutton"><img src="/script/slide2/images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
<div id="slider">
<ul>
<li><img src="/script/slide2/photos/1.jpg" width="500" height="300" alt="Sea turtle" /></li>
<li><img src="/script/slide2/photos/2.jpg" width="500" height="300" alt="Coral Reef" /></li>
<li><img src="/script/slide2/photos/3.jpg" width="500" height="300" alt="Blue Fish" /></li>
<li><img src="/script/slide2/photos/4.jpg" width="500" height="300" alt="Blue Fish" /></li>
</ul>
</div>
<div class="sliderbutton"><img src="/script/slide2/images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
</div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)">1</li>
<li onclick="slideshow.pos(1)">2</li>
<li onclick="slideshow.pos(2)">3</li>
<li onclick="slideshow.pos(3)">4</li>
</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0
});
</script>
</body>
</html>
