HTML JQuery 이미지 슬라이더

이 문제가 발생했습니다. image slider. 이미지가 페이드 인 및 페이드 아웃되어야하는데 각 이미지는 5 초 동안 표시됩니다. 나는 비교적 새로운 코딩과이 사이트에서 누군가가이 문제를 도와 주는지 궁금해하고 있었다.HTML JQuery 이미지 슬라이더

지금은 첫 번째 이미지에 막 붙어있어 슬라이드 쇼가 전혀 작동하지 않습니다.

나는 당신이 ResponsiveSlides.js 파일에 접근 할 수 없다는 것을 알고 있지만 그 js 파일 내에 있지 않지만 초보자 코드 내에서 작은 오류가 있다고 생각한다. 코드에서 오류

.rslides { 
 
    position: relative; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 

 
.rslides li { 
 
    -webkit-backface-visibility: hidden; 
 
    position: absolute; 
 
    display: none; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    } 
 

 
.rslides li:first-child { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    } 
 

 
.rslides img { 
 
    display: block; 
 
    height: auto; 
 
    float: left; 
 
    width: 100%; 
 
    border: 0; 
 
    }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script src="js/responsiveslides.min.js"></script> 
 
    <title>George Burke</title> 
 
    <link rel="stylesheet" href="styling.css"/> 
 
    <script type="text/javascript"> 
 

 
    jQuery(document).ready(function() { 
 
     $(document).on("scroll", function(){ 
 
     if ($(document).scrollTop() > 100) { 
 
      $(".header").addClass("shrink"); 
 
     } else { 
 
      $(".header").removeClass("shrink"); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
    <script type="text/javascript" charset="utf-8"> 
 
$(function(){ 
 
    // Trigger maximage 
 
    jQuery('#maximage').maximage(); 
 
}); 
 

 

 
    </script> 
 
    <script> 
 
    $(function() { 
 
     $("#.rslides").responsiveSlides({ 
 
     auto: true, 
 
     fade: 500, 
 
     speed: 100, 
 
     }); 
 

 
    }); 
 
    </script> 
 

 
\t </head> 
 

 
\t <body> 
 

 
    <div id="maximage"> 
 
     <ul class="rslides"> 
 
     <li><img src="images/turbines.jpg" alt=""></li> 
 
     <li><img src="images/london.jpg" alt=""></li> 
 
     <li><img src="images/nbauk.jpg" alt=""></li> 
 
     </ul> 
 
    </div> 
 

 
    <header class="header"> 
 
    <nav> 
 
    \t <h1>George Burke</h1> 
 
<!-- 
 
    <ul> 
 
     <li><a href="">me</a></li> 
 
     <li><a href="">photos</a></li> 
 
     <li><a href="">queries</a></li> 
 
     <li><a href="">connect</a></li> 
 
    </ul> 
 
-->

출처

2016-07-06 george burke

브라우저의 디버그 콘솔에서 JavaScript 오류를 찾으셨습니까? – PaulH

있습니다 : 여기

는 HTML의 CSS 및 부분

$("#.rslides")

이 있어야 할이

$(".rslides")

가 id
.위한 선택이며 #가 #.으로 동시에 사용할 수는 없지만

이

<ul class="rslides">

. 참조하는 class위한 선택기이다.

출처

2016-07-06 16:57:39 PaulH

폴 감사합니다. –

HTML JQuery 이미지 슬라이더

답변

관련 문제