0
현재 jQuery Slider로 교체하려는 Flash Player를 사용하는 웹 사이트가 있습니다 (클릭 가능한 링크가 될 개별 이미지 필요). 이를 통해 온라인에서 간단한 슬라이더 구현을 발견하고 완벽하게 작동하는지 테스트했습니다.콘텐츠 위에 나타나는 HTML jQuery 슬라이더
Flash Player를 슬라이더로 바꾸면 슬라이더가 올바른 위치에 있지만 아래의 모든 내용이 위로 이동하고 슬라이더 아래에 나타납니다.
다음은 단순한 모양입니다. 웃는 얼굴은 슬라이더에 차례로 나타나는 몇 가지 이미지 중 하나입니다. Lorem 텍스트는 이전에는 Flash Player 아래에 있었던 모든 컨텐츠이지만 이제는 위로 이동되었습니다. LOREM 텍스트는 로렘 입숨 1에서 시작하지만 화면에 처음 표시되는 내용이 
아래
콘텐츠의 테이블 행에 절대 위치 지정을 사용하여 콘텐츠를 아래로 이동할 수 있지만 이것이 최선의 해결책이라고 생각하지 않습니다. 내 콘텐츠를 슬라이더 아래로 밀어 넣을 수있는 다른 방법이 있습니까?
나는 또한 자체 테이블에 슬라이더를 놓았지만 그 역시 도움이되지 않습니다.
CSS
#slideshow {
position:relative;
}
#slideshow A {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow A.active {
z-index:10;
opacity:1.0;
}
#slideshow A.last-active {
z-index:9;
}
html로
<body style="font-family: Arial, Sans-serif, sans;">
<table>
<tr>
<td>
<div id="slideshow">
<a href="#"><img src="images/slide-1.jpg" alt="Slideshow Image 1" /></a>
<a href="#"><img src="images/slide-2.jpg" alt="Slideshow Image 2" /></a>
<a href="#"><img src="images/slide-3.jpg" alt="Slideshow Image 3" /></a>
<a href="#"><img src="images/slide-4.jpg" alt="Slideshow Image 4" /></a>
<a href="#"><img src="images/slide-5.jpg" alt="Slideshow Image 5" /></a>
<a href="#"><img src="images/Untitled.jpg" alt="Slideshow Image 5" /></a>
</div>
</td>
</tr>
<tr>
<td>
<p>Lorem ipsum 1</p>
<p>Lorem ipsum 2</p>
<p>Lorem ipsum 3</p>
<p>Lorem ipsum 4</p>
<p>Lorem ipsum 5</p>
<p>Lorem ipsum 6</p>
<p>Lorem ipsum 7</p>
<p>Lorem ipsum 8</p>
<p>Lorem ipsum 9</p>
<p>Lorem ipsum 10</p>
<p>Lorem ipsum 11</p>
<p>Lorem ipsum 12</p>
<p>Lorem ipsum 13</p>
<p>Lorem ipsum 14</p>
<p>Lorem ipsum 15</p>
<p>Lorem ipsum 16</p>
<p>Lorem ipsum 17</p>
<p>Lorem ipsum 18</p>
<p>Lorem ipsum 19</p>
<p>Lorem ipsum 20</p>
<p>Lorem ipsum 21</p>
<p>Lorem ipsum 22</p>
<p>Lorem ipsum 23</p>
<p>Lorem ipsum 24</p>
<p>Lorem ipsum 25</p>
<p>Lorem ipsum 26</p>
<p>Lorem ipsum 27</p>
<p>Lorem ipsum 28</p>
<p>Lorem ipsum 29</p>
<p>Lorem ipsum 30</p>
<p>Lorem ipsum 31</p>
<p>Lorem ipsum 32</p>
</td>
</tr>
</table>
</body>