Несколько слайд-шоу Jquery - PullRequest
Новая
       5

Несколько слайд-шоу Jquery

0 голосов
/ 24 мая 2011

Я пытаюсь создать страницу с несколькими слайд-шоу jquery, каждое из которых имеет собственную кнопку «предыдущий», используя цикл jquery all.Вот мой код: 

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next',
    prev:'#prev',
    });
});

    </script>

и HTML для 2 слайд-шоу (но я хочу 4) 

<div id="content">
<a name="1" id="1"></a>
<div id ="slideshow">
  <img src="image2.jpg" width="675" height="420" />
  <img src="image.jpg" width="675" height="420" />
</div>
<a id="prev" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp;  <a id="next" href="#" class="Code-Pro3">Next </a>


<a name="2" id="2"></a>
<div id ="slideshow2">
  <img src="image.jpg" width="675" height="420" />
  <img src="image2.jpg" width="675" height="420" />
</div>
<a id="prev" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp;  <a id="next" href="#" class="Code-Pro3">Next </a>

любая помощь приветствуется.спасибо.

Ответы [ 2 ]

0 голосов
/ 19 ноября 2011

Один из способов сказать каждому .slideshow на странице, что нужно найти собственные кнопки prev и next , - сгруппировать слайд-шоу, а prev и следующая кнопка в том же родительском элементе, а затем найдите их с помощью селекторов jQuery: 

<script type="text/javascript">
  $(document).ready(function() {
    $('.slideshow').each(function(){
      $(this).cycle({
        fx:'fade', 
        speed:1, 
        timeout: 0,
        next: $('.next', $(this).parent()),
        prev: $('.prev', $(this).parent())
      });
    });
  });
</script>

и теперь в html вы можете использовать классы, а не идентификаторы, просто не забудьте сгруппировать каждое слайд-шоу с собственными prev и next button. 

<div id="content">
  <div>
    <a name="1" id="1"></a>
    <div class ="slideshow">
      <img src="image2.jpg" width="675" height="420" />
      <img src="image.jpg" width="675" height="420" />
    </div>
    <a href="#" class="Code-Pro3 prev">Prev</a> &nbsp;&nbsp;  <a href="#" class="Code-Pro3 next">Next </a>
  </div>

  <div>
    <a name="2" id="2"></a>
    <div class ="slideshow">
      <img src="image.jpg" width="675" height="420" />
      <img src="image2.jpg" width="675" height="420" />
    </div>
    <a href="#" class="Code-Pro3 prev">Prev</a> &nbsp;&nbsp;  <a href="#" class="Code-Pro3 next">Next </a>
  </div>
  ...
0 голосов
/ 17 сентября 2011

Чтобы иметь два отдельных элемента div со своими предыдущими и последующими ссылками, вам нужно дважды вызвать цикл и использовать уникальные идентификаторы для ссылок.Таким образом, ваш скрипт должен выглядеть так: 

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow1').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next1',
    prev:'#prev1',
    });
$('#slideshow2').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next2',
    prev:'#prev2',
    });
});

</script>

, а ваша разметка выглядит так: 

<div id="content">
<a name="1" id="1"></a>
<div id ="slideshow1">
  <img src="image2.jpg" width="675" height="420" />
  <img src="image.jpg" width="675" height="420" />
</div>
<a id="prev1" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp;  <a id="next1" href="#" class="Code-Pro3">Next </a>

<a name="2" id="2"></a>
<div id ="slideshow2">
  <img src="image.jpg" width="675" height="420" />
  <img src="image2.jpg" width="675" height="420" />
</div>
<a id="prev2" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp;  <a id="next2" href="#" class="Code-Pro3">Next </a>

См. http://www.malsup.com/jquery/cycle/scrollhv.html для примера.помогает,

Дэвид

...