2016-07-06 2 views
0

У меня возникают проблемы с этим image slider. Изображения должны исчезать и выходить, каждое изображение отображается в течение 5 секунд. Я относительно новичок в кодировании и на этом сайте, и мне было интересно, сможет ли кто-нибудь помочь мне с этой проблемой.HTML JQuery Image Slider

На данный момент я просто застрял на первом изображении, и слайд-шоу не работает вообще.

Я знаю, что у вас нет доступа к файлу ResponsiveSlides.js, но я считаю, что есть небольшая ошибка, которая не находится в этом js-файле, но в моем коде для начинающих.

Вот CSS и часть HTML:

.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> 
 
-->

+0

Вы искали ошибку JavaScript в консоли Debug вашего браузера? – PaulH

ответ

1

Существует ошибка в коде:

$("#.rslides") 

должен быть

$(".rslides") 

это относится к

<ul class="rslides"> 

. является селектор для class в то время как # это селектор для id
. и # не могут быть использованы одновременно в качестве #..

+0

Большое спасибо. –