jquery cycle 플러그인 호출기가 덮여 있습니다

jQuery 사이클 플러그인과 호출기 옵션을 사용하여 탐색을 허용하는 자동화 된 이미지 슬라이더/회전식 커서를 만들려고합니다.jquery cycle 플러그인 호출기가 덮여 있습니다

그 상관없이 하나 개의 이미지에서 다음에 퇴색하지 않으며, 부분적으로 많은 예제 모든 의도와 목적의 기능의 벌금을 들어 here

같은 이미지 위에 포함 호출기 일련의 요소를 제공하지만,하는 것이 무엇을 의미하는 지에 대하여 호출기 요소를 위에 놓으려고하면 이미지가 단추 위로 덮여집니다.

저는 현재 호스팅이 부족합니다. 저는이 모든 것을 현지에서하고 있습니다. 하지만 여기에 코드가 있습니다.

HTML :

이

<head> 
<title></title> 
<link rel="stylesheet" type="text/css" media="screen" href="jquery.css" /> 
<script type="text/javascript" src="js/jquery-1.3.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#myslides') 
    .before('<div id="nav">') 
    .cycle({ 
    fx: 'fade', 
    speed: 500, 
    timeout: 3000, 
    pager: '#nav' 
}); 
}); 



</script> 

</head> 
<body> 
<div id="content-area"> 
<div id="myslides"> 
<img src="pic1.jpg" /> 
<img src="pic2.jpg" /> 
<img src="pic3.jpg" /> 
<img src="pic4.jpg" /> 
<img src="pic5.jpg" /> 
</div> 
</div> 
</body> 
</html>

CSS :

#myslides { 
width: 586px; 
height: 311px; 
padding: 0; 
margin: 0 auto;} 
#myslides img { 
padding: 10px; 
border: 1px solid rgb(100,100,100); 
background-color: rgb(230,230,230); 
width: 586px; 
height: 311px; 
top: 0; 
left: 0;} 
#nav { 
float: right; 
position: absolute; 
top: 200px; 
float: right;} 
.nav { margin: 5px 0; } 
#nav a { 
margin: 0 5px; 
padding: 3px 5px; 
border: 1px solid #ccc; 
background: #fc0; 
text-decoration: none } 
#nav a.activeSlide { background: #ea0} 
#nav a:focus { outline: none; }

물론 위의 JS 나열된 파일

: JQuery와 - 1.3.js & jquery.cycle.all.js

출처

2010-02-10 VikingGoat

부여하여 #nav z- 색인 100.

호출기가 슬라이드 쇼 이미지 아래에있는 이유는주기 플러그인이 각 슬라이드의 Z- 색인을 조정하기 때문입니다.

출처

2010-02-11 02:08:22 nickelleon

감사합니다. Z- 인덱스를 가지고 노는 것을 생각하지 않았습니다. > _ < 때때로 나는 분명히 나에게 지적해야 할 필요가있다. – VikingGoat

jquery cycle 플러그인 호출기가 덮여 있습니다

답변

관련 문제