Question

我非常感谢帮助您实现这一目标。我已经尝试了一些这些Jquery滑块教程，但我想我必须记下一些关键的东西？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ssss</title>
<meta name="generator" content="BBEdit 10.5" />

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

<script>
  $(function() {
    $(".responsiveslides").responsiveSlides();
  });
</script>

<script>
$(".responsiveslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 50,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: true,           // Boolean: Show pager, true or false
  nav: true,             // Boolean: Show navigation, true or false
  random: true,          // Boolean: Randomize the order of the slides, true or false
  pause: true,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "default",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});

</script>
    <style>

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

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

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

.responsiveslides img {
  display: block;
  height: 60%;
  float: left;
  width: 69%;
  border: 0;
  }
</style>
</head>
<body>
<ul class="responsiveslides">
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%201.jpg"  alt="101"/> </li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%202.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%203.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%204.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%205.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%206.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%207.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%208.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%209.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2010.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2011.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2012.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2013.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2014.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2015.jpg"  alt="101"/></li>
    <li><img src="/Users/mitchellheritagehaldenby/Desktop/outcast%20website/images/image%2016.jpg"  alt="101"/></li>
</ul>

</body>
</html>

Answer 1

看起来你正在初始化插件两次。

首先，没有选择......

$(function() {
    $(".responsiveslides").responsiveSlides();
});

其次是这里有一大堆......

$(".responsiveslides").responsiveSlides({
    auto: true,              // Boolean: Animate automatically, true or false
    speed: 50,               // Integer: Speed of the transition, in milliseconds
    timeout: 4000,           // Integer: Time between slide transitions, in milliseconds
    pager: true,             // Boolean: Show pager, true or false
    nav: true,               // Boolean: Show navigation, true or false
    random: true,            // Boolean: Randomize the order of the slides, true or false
    pause: true,             // Boolean: Pause on hover, true or false
    pauseControls: true,     // Boolean: Pause when hovering controls, true or false
    prevText: "Previous",    // String: Text for the "previous" button
    nextText: "Next",        // String: Text for the "next" button
    maxwidth: "",            // Integer: Max-width of the slideshow, in pixels
    navContainer: "default", // Selector: Where controls should be appended to, default is after the 'ul'
    manualControls: "",      // Selector: Declare custom pager navigation
    namespace: "rslides",    // String: Change the default namespace used
    before: function() {},   // Function: Before callback
    after: function() {}     // Function: After callback
});

您只需要初始化插件一次。这是一个有效的演示：http://jsfiddle.net/galengidman/JqU77/

Answer 2

除非您想更改默认值，否则不需要包含参数。这是我的。它是页面上唯一的脚本

<script>
  $(function() {
    $(".rslides").responsiveSlides({
        nav:true,
    });
  });
</script>

我想做的就是显示导航。其余的保持默认。我正在使用jquery 1.11.0

继承我标题中的脚本链接

<script src="incls/jq1110.js"></script>
<script src="incls/responsiveslides.min.js"></script>

另外，您说responsiveslides文件位于名为js的文件夹中。从下面的脚本标记中，您可以从与网页相同的目录中调用它

<script src="responsiveslides.min.js"></script>

应该是的 <script src="js/responsiveslides.min.js"></script>？

欢呼

如何让我的Jquery滑块工作？

2 个答案: