Question

我是jQuery的初学者，我正在尝试使用滑块（作为一种学习它如何工作的方式），我从网上下载。

我能够显示滑块，但下一个和上一个按钮不起作用。

如果有人可以帮助我，我会很高兴的。

我无法弄清楚为什么下一个和前一个按钮不起作用以及我应该如何让它们在jQuery中工作。

感谢。

以下是我在HTML中的内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Blog</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/themes.css">

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

 </head>
  <body>
  <header>
  <div class="background">
    <div class="wrapper">
        <div class="header">
            <div class="logo">
                <a href="index.html"><img src="img/logo.png" alt="logo"></a>
            </div>
            <div class="navigation">
                <ul id="nav">
        <li class="current-menu-item"><a href="index.html">HOME</a></li>
        <li class="blog"><a href="blog.html">BLOG</a></li>
        <li class="about"><a href="about.html">ABOUT</a></li>
        <li class="work"><a href="work.html">WORK</a></li>
        <li class="contact"><a href="contact.html">CONTACT</a></li>
                </ul>
            </div>
        </div>
        <ul class="rslides centered-btns centered btsn1" id="slider1">
    <li id="centered-btns1_s0" class="centered-btns1_on" style="display: block; float: left; position: relative; opacity: 1; z-index: 2; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;"><img src="img/1.jpg" alt=""></li>
              <li id="centered-btns1_s1" style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class=""><img src="img/2.jpg" alt=""></li>
              <li id="centered-btns1_s2" style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class=""><img src="img/3.jpg" alt=""></li>
<a href="#" class="centered-btns_nav centered-btns1_nav prev">Previous</a>
<a href="#" class="centered-btns_nav centered-btns1_nav next">Next</a>
        </ul>
    </div>
  </div>
  </header>



<script>

$(function () {


  $("#slider1").responsiveSlides({
    auto: false,
    pager: true,
    nav: true,
    speed: 500,
    maxwidth: 800,
    namespace: "centered-btns"
  });

});

</script>
</body>

</html>

jQuery Slider下一个上一个按钮

0 个答案: