jQuery 이미지 슬라이드 쇼가 넷빈즈에서 작동하지 않는 이유

이전/다음 버튼과 자동 슬라이드 기능으로 이미지 슬라이드 쇼를 만드는 데 많은 jQuery를 사용해 보았습니다. 그러나 일정한 오류가 있습니다. 내 웹 페이지에서 슬라이드 쇼는 아무런 그림이없는 검은 색 화면입니다.jQuery 이미지 슬라이드 쇼가 넷빈즈에서 작동하지 않는 이유

<html lang="es"> 
    <head> <title>ACE ARCHERY</title> 

     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <link rel="stylesheet" href="Stylesheet.css"> 
     <link rel="stylesheet" href="nivo-slider.css" media="screen"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script src="jquery.nivo.slider.pack.js"></script> 
     <script> 
      $(window).load(function() { 
       $('#slider').nivoSlider({ 
        directionNavHide: false, 
        captionOpacity: 1, 
        prevText: '<', 
        nextText: '>' 
       }); 
      }); 
     </script> 

<!--  <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 

     <script type ="text/javascript"> 
      $(document).ready(function slider() { 
       $("#1").show("fade", 500); 
       $("#1").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();" >--> 
    <body> 
     <div class="wrapper"> 
     <div class="slider"> 
      <div class="slider-wrapper futurico-theme"> 
       <div id="slider" class="nivoSlider"> 
        <img src="Slide_image/one.jpg" alt=""> 
        <img src="Slide_image/two.jpg" alt=""> 
        <img src="Slide_image/three.jpg" alt=""> 
        <img src="Slide_image/four.jpg" alt=""> 
        <img src="Slide_image/five.jpg" alt=""> 
        <img src="Slide_image/six.jpg" alt=""> 
       </div> 
      </div> 
<!--  <div class = "slider"> 
      <img id="1" src="Slide_image/one.jpg" border = "0" alt = "One"/> 
      <img id="2" src="Slide_image/two.jpg" border = "0" alt = "Two"/> 
      <img id="3" src="Slide_image/three.jpg" border = "0" alt = "Three"/> 
      <img id="4" src="Slide_image/four.jpg" border = "0" alt = "Four"/> 
      <img id="5" src="Slide_image/five.jpg" border = "0" alt = "Five"/> 
      <img id="2" src="Slide_image/six.jpg" border = "0" alt = "Six"/> 
     </div>--> 
    </div>

그리고 CSS :

.futurico-theme.slider-wrapper { 
    position: relative; 
    width: 500px; 
    height: 250px; 
    margin: 0; 
    padding: 5px; 

    background: #141517; 

    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

.futurico-theme .nivoSlider { 
    position: relative; 
    width: 500px; 
    height: 250px; 
} 

.futurico-theme .nivoSlider img { 
    display: none; 
    position: absolute; 
    width: 500px; 
    height: 250px; 
    top: 0; 
    left: 0; 
} 
.futurico-theme .nivo-controlNav { 
    position: absolute; 
    bottom: -30px; 
    left: 105px; 
} 
.futurico-theme .nivo-controlNav a { 
    display: block; 
    float: left; 
    width: 16px; 
    height: 16px; 
    margin-right: 5px; 
    text-indent: -9999px; 

    background: #141517; 

    -webkit-border-radius: 16px; 
    -moz-border-radius: 16px; 
    border-radius: 16px; 

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05); 
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05); 
    box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05); 
} 
.futurico-theme .nivo-controlNav a.active, 
.futurico-theme .nivo-caption span { 
    background: #a5cd4e; 
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); 
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 

    -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3); 
    -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3); 
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3); 
} 
.futurico-theme .nivo-directionNav a { 
    display: block; 
    top: 60px; 

    font-family: 'Consolas', sans-serif; 
    font-size: 40px; 
    color: #141517; 
    text-shadow: 0px 1px 1px rgba(255,255,255, .05); 
} 

.futurico-theme a.nivo-prevNav { left: -40px; } 

.futurico-theme a.nivo-nextNav { right: -40px; } 

.slider-wrapper { 
    width: 80%; 
    margin: 100px auto; 
}

출처

2015-01-20 Ariel Seah

포럼 사이트와 달리, 우리는 "감사"또는 "도움을 주셨습니다"또는 [그래서]의 서명을 사용하지 않습니다. "[안녕하세요, '고마워,'태그 라인 및 인사말을 게시물에서 삭제해야합니까?] (http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be 참조) -removed-from-posts) BTW, "고마워요"가 아니라 "미리 감사드립니다." –

OKA, 많이 감사드립니다. –

하는 자바 스크립트와 CSS 경로

당신의 NIVO을 확인 교차하십시오이 내 코드입니다 http://designmodo.com/image-slider-jquery-css3/

: 나는 다음있어 예는이 웹 사이트입니다

<link rel="stylesheet" href="nivo-slider.css" media="screen"> 
<script src="jquery.nivo.slider.pack.js"></script>

nivo javascript가로드되어 있지 않으면 검정색 화면이 나타납니다. 다음

는 작업 샘플 jsfiddle입니다 : http://jsfiddle.net/zeskysee/jjucqame/3/

당신이 가진 오류를 시뮬레이션하기 위해, 당신은 다음 슬라이드 쇼없이 검은 색을 볼 외부 자원 "jquery.nivo.slider.js"를 제거하려고 할 수 있습니다

출처

2015-01-20 03:08:28 Zesky

jQuery 이미지 슬라이드 쇼가 넷빈즈에서 작동하지 않는 이유

답변

관련 문제