2014-01-29 4 views
0

js를 사용하여 슬라이드 쇼를 만들려고합니다. 도움을 요청했으며 JSFiddle에서 작동하지만 내 로컬 환경에서는 작동하지 않으므로 궁금합니다. 나는 어딘가에서 누군가가 나를 도울 수있는 말씨 나 그릇된 것을 가지고있다.Html이 js에 연결하지 않습니다

HTML5

<!DOCTYPE html> 
<html> 

<head> 
    <title>slider</title> 

    <link rel="stylesheet" href="style.css" type="text/css"/> 

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta name="viewport" content="with=device-width, initial-scale=1.0"> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="slider.js"></script> 
</head> 

<body onload="slider()"> 

    <div class="slider"> 
     <img id="1" src="slide_image1.jpg" alt="TV Deals"/> 
     <img id="2" src="slide_image2.jpg" alt="Furniture Deals"/> 
     <img id="3" src="slide_image3.jpg" alt="Electronic Deals"/> 
    </div> 

</body> 
</html> 

CSS3

.slider { 
    width: 990px; 
    height: 270px; 
    overflow: hidden; 
    margin: 30px auto; 
    background-image: url('ajax-loader.gif'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.slider img{ 
    border: 0; 
    display: none; 
} 

자바 스크립트

$(document).ready(function() { 
    slider(); 
}); 

function slider(){ 
    var count = 1; 

    $('#1').show(); 

    (function slide(){ 
     $('.slider img').hide(); 

     if (count > 3) {count = 1;} // makes this a loop 

     $('#'+count).fadeIn('slow'); 
     count += 1; 

     setTimeout(function() { 
      slide(); 
     }, 5000); 
    })(); 
} 

내 "온로드"명령이 맞습니까? 저는 웹 표현식을 디자이너로 사용하고 있습니다. 실제로는 각각의 이미지에 대한 URL 경로를 통해 이미지를 선택 했으므로 경로가 정확하다는 것을 알았습니다 (j에 대해 동일한 작업을 수행함). JavaScript 자체가 "slider.js"라고 불리우는 것이 어쨌든 내 코드에 영향을 미칠 수 있습니까? 이것은 이것들 중 하나를 수행하는 나의 첫 번째 시도이므로 어떤 문제가 잘못되었는지 알지 못합니다.

답변

0

로컬 환경을 말하면 컴퓨터에서 file:// 프로토콜로 실행되고 있습니까? (예 : file://C:\My\Files\index.html과 같은 모양) 또는 http:// 프로토콜을 실행하는 서버의 경우?

예전의 경우 스크립트 srcs를 //에서 http://으로 명시 적으로 변경해야합니다. //은 "페이지가 사용하는 프로토콜을 사용하십시오"라는 뜻이므로 분명히 존재하지 않는 file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js을 시도합니다.

로컬로 작업 할 때 흔히있는 실수 인 점은 저만 뛰어 내리는 유일한 방법입니다.

+0

나는 내 파일에서 일하고있다. – SecretWalrus

+0

그렇다면 두 googleapis.com 스크립트 src의 '//'를 'http : //'로 변경하면 트릭을 수행해야합니다. – samanime

+0

이제 끝내 주겠다.하지만 지금은 미끄러지지 않고있다. 이미지가 플래시 인 후 플래시되고 머물러있는 다음 플래시 아웃되고 다음 이미지가 다시 들립니다. – SecretWalrus

관련 문제