2013-02-22 3 views
-1

jQuery와 HTML을 사용하여 슬라이드 쇼를 만들고 있지만 문제가 있습니다. 하나의 이미지가 나타나고 다른 슬라이드는 문제가 있습니다. 나는 문제가 어디 있는지 알 수 없다. 비슷한 문제가있는 사람이 있습니까?ERROR jQuery 슬라이드 쇼에 이미지가 표시되지 않습니다.

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>JQuery Slider</title> 
    <style type="text/css"> 
     .slider{ 
     width:800px; 
     height:350px; 
     overflow:hidden; 
     margin:30px auto; 
     } 
     .slider img{ 
     width:800px; 
     height:350px; 
     display:none; 
     } 
    </style> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
function Slider(){ 
$('#img1').show("fade", 500); 
$('#img2').delay(5500).hide("slide", {direction:"left"}, 500); 

var sc=$(".slider img").size(); 
var count=2; 

setInterval(function(){ 

    $(".slider#"+count).show("slide", {direction:"right"}, 500); 
    $(".slider#"+count).delay(5500).hide("slide", {direction:"left"}, 500); 

    if(count == sc){ 

    count=1; 
    }else{ 
     count=count+1; 
    } 
    }, 6500); 
} 

</script> 
</head> 

<body onload="Slider();"> 

<div class="slider"> 

<img id="img1" src="img/13052012438.jpg"border="0"alt="image1" /> 
<img id="img2" src="img/25052012442.jpg"border="0"alt="image2" /> 

<img id="img3" src="img/13052012439.jpg"border="0"alt="image3" /> 
<img id="img4" src="img/25052012441.jpg"border="0"alt="image4" /> 

</div> 

</body> 
</html> 
+1

jsfiddle은 – martriay

+0

당신이 무슨 뜻인지 내가 –

+0

사용을 이해하지 못했다 martiay하십시오 jsfiddle.net를 참조하십시오 여기에

코드입니다 코드의 실제 예제를 보여주기 위해 문제를보고 작업하는 데 도움이됩니다. – martriay

답변

0

사용이 ...

$(document).ready(function(){ 
$('#img1').show("fade", 500); 
$('#img2').delay(500).hide("slide", {direction:"left"}, 500); 
var sc=$(".slider img").size(); 
var count=2; 

setInterval(function(){ 
    $("#img"+count).show("slide", {direction:"right"}, 500); 
    $("#img"+count).delay(500).hide("slide", {direction:"left"}, 500); 
    if(count == sc){ 
     count=1; 
    }else{ 
     count=count+1; 
    } 
    }, 6500); 
}); 

그리고이 jSfiddle example

+0

MG_Bautista 나는 이것을 시도했습니다. 코드 덩어리지만 여전히 슬라이드 기능을 만들지 마세요 –

+0

@ user2097286 http://jsfiddle.net/fmzdy/4/ 예제를보고 '1000'으로 '6500'을 변경하십시오. –

관련 문제