Question

我正在尝试使用jquery滑块在我的网站上运行。我没有编程，因为我不能，我只是尝试使用那里的东西，并在演示网站上工作。我已经尝试了几个准备使用jquery幻灯片和滑块，没有任何成功。我现在已经找到了最简单的一个，我想但是不能让这个工作也可以，尽管我认为我已经按照指示的所有步骤进行了操作。我现在拥有的是＆＃34; http://responsiveslides.com/＆＃34;，所有文件都在Github上： https://github.com/viljamis/ResponsiveSlides.js

我把它放在我的html <head>

中

<!-- Slideshow begin -->    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
    $(function() {
        $("#slider1").responsiveSlides({
            auto: true,   
            speed: 500,   
            timeout: 4000 
        });
    });
</script>

这是我的html

<div class="welcome section"><!-- welcome section begin -->
    <img src="mobile/media/logo2s.jpg" alt="" style="display:block; margin-left:auto; margin-right:auto;">
    <div id="wrapper">
        <ul class="rslides" id="slider1">
            <li><img src="mobile/media/p_0001.jpg" alt=""></li>
            <li><img src="mobile/media/p_0002.jpg" alt=""></li>
            <li><img src="mobile/media/p_0003.jpg" alt=""></li>
        </ul>
    </div>
</div><!-- welcome section end -->

responsiveslides.min.js位于目录js下的服务器上，该目录与我的html位于同一目录中。我还在我的.css文件中添加了相关的CSS，但滑块不会滑动。

根本没有过渡。我不认为我错过了什么，但显然我有。有人可以帮忙吗？

Answer 1

按照页面上的所有内容进行操作。

你有这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

你需要这个（记得将.jpg文件名改为1,2等）：

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

所有的CSS：

.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>
   $(function() {
     $(".rslider").responsiveSlides({
         auto: true,   
         speed: 500,   
         timeout: 4000 
     });
   });

希望它有效！

无法使用简单的jquery滑块工作

1 个答案: