Question

我是jquery的新手，所以请和我待在一起，保持温柔。

我使用.cycle代码作为导航，我想点击一个按钮，即“关于我们”，它会带你到包含“关于我们”内容的div

我有这个工作，但注意到我失去了我的动画，我知道问题是什么，但由于我缺乏知识，我不知道如何解决它，这些论坛对我学习这段代码很好，所以我想我会问。

这是我的javascript代码，就像我说的，这可以工作并转移我选择的div，它不做的是再显示幻灯片效果。我也希望它能显示和隐藏div。

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
    $('#container').cycle({
        fx: 'scrollHorz',
        speed: 'fast',
        timeout: 0,
    });
    jQuery('.index_navigation_1').click(function () {
        window.location.href = '#about_us_container';
        return false;
    });
    jQuery('.index_navigation_2').click(function () {
        window.location.href = '#contact_us_container';
        return false;
    });
});
</script>

这是HTML代码

<div id ="container">
  <div id="index_container">
    <div id="header">home</div>
    <div id="index_navigation">
      <div id="nav_buttons" class="index_navigation_1">ABOUT US</div>
      <div id="nav_buttons" class="index_navigation_2">CONTACT US</div>
      <div id="nav_buttons" class="index_navigation_3">BUTTON 3</div>
      <div id="nav_buttons" class="index_navigation_4">BUTTON 4</div>
    </div>
    <div id ="about_us_container">
    <div id="header">about us</div>
    </div>
    <div id="navigation">
      <div id="nav_buttons" class="about_us_navigation_1">ABOUT US BUTTON 1</div>
      <div id="nav_buttons" class="about_us_navigation_2">ABOUT US BUTTON 2</div>
      <div id="nav_buttons" class="about_us_navigation_3">ABOUT US BUTTON 3</div>
      <div id="nav_buttons" class="about_us_navigation_4">ABOUT US BUTTON 4</div>
      <div id="nav_buttons" class="about_us_navigation_5">ABOUT US BUTTON 5</div>
    </div>
    <div id="contact_us_container">
      <div id="header">contact us</div>
    </div>
    <div id="navigation">
      <div id="nav_buttons" class="contact_us_navigation_1">CONTACT US BUTTON 1</div>
      <div id="nav_buttons" class="contact_us_navigation_2">CONTACT US BUTTON 2</div>
      <div id="nav_buttons" class="contact_us_navigation_3">CONTACT US BUTTON 3</div>
      <div id="nav_buttons" class="contact_us_navigation_4">CONTACT US BUTTON 4</div>
      <div id="nav_buttons" class="contact_us_navigation_5">CONTACT US BUTTON 5</div>
    </div>
  </div>
</div>

并且只是加入，这里是CSS

#container {
  height:417px;
  width: 320px;
  font-family: Helvetica, Arial, sans-serif;
  color: #FFF;
}
#scroll_container {
  height:417px;
  width: 320px;
  background-color: #0FF;
}
#index_navigation {
  background-color: #EC008C;
  width: 320px;
}
#navigation {
  background-color: #EC008C;
  width: 320px;
}
#nav_buttons {
  height: 60px;
  width: 320px;
  background-image: url(images/buttons/pink_button.svg);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 60px;
  color: #FFF;
  text-align: center;
}
#header {
  background-color: #9CF;
  height: 177px;
  width: 320px;
}

由于

Answer 1

从未使用过Cycle插件，但根据可用的文档和演示，您可以致电.cycle(index)转到特定幻灯片。

$('.index_navigation_1').click(function() { 
    $('#container').cycle(1); 
    return false; 
});

仔细查看'goto slide' demo和Another 'goto' demo (aka: Poor-man's pager)。

<强>更新

您可以使用index()来获取jQuery对象中第一个元素相对于其兄弟元素的位置。

$('#container').find('#about_us_container').index()

比自己键入索引更复杂的是为每个链接和幻灯片创建带有类的链接和单独的click事件处理程序。

你应该尝试这样的事情;

$('.goToSlide').click(function(e) {
  e.preventDefault();
  var selector = $(this).data('slide');
  var slideIndex = $(selector).index();
  $('#container').cycle(slideIndex);
});

与;

<a href="#" class="goToSlide" data-slide="#about_us_container">Goto #about_us_container</a>
<a href="#" class="goToSlide" data-slide="#contact_us_container">Goto #contact_us_container</a>

请注意，我写了这个例子来说明这个概念并且它没有经过测试。

更新2

确保您使用的是有效的HTML。从基本设置开始，然后从那里开始。

$('#slide_containers').cycle({
    fx: 'scrollHorz',
    speed: 'fast',
    timeout: 0
});

$('.goToSlide').click(function(e) { // Bind click event to all elements with the class goToSlide
  e.preventDefault();
  var selector = $(this).data('slide'); // Get the data-slide attribute value
  //console.log(selector, $(selector), $(selector).index()); // DEBUG
  var slideIndex = $(selector).index(); // Get the index of the slide element
  $('#slide_containers').cycle(slideIndex); // Cycle to slide by index
});

查看我的jsFiddle demo。

.cycle jquery，使用按钮显示所选的div（按id还是类）？

1 个答案: