JQuery цикл пауза при наведении на следующий / предыдущий - PullRequest
Новая
       13

JQuery цикл пауза при наведении на следующий / предыдущий

0 голосов
/ 08 января 2012

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

Вот код, который я сейчас использую:

JQuery: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true,
pause: 1 
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>


Похожие HTML: 

<div id="s2" class="pics">
<a href="coral_natural_stone_1lg.jpg"><img src="coral_natural_stone_1.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" /></a>
<img src="coral_natural_stone_2.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_3.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_4.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_5.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_6.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_7.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
</div>

<p id="caption"></p>

<div class="nav"><a id="prev2" href="#"><img src="prevbttn.jpg" width="30" height="30" alt="previous" /></a><img src="spacer.gif" width="10" height="10" alt="spacer" /><a id="next2" href="#"><img src="nextbttn.jpg" width="30" height="30" alt="next" /></a></div>

и соответствующий CSS: 

.pics {  
width:   1000px;  
height:  450px;  
padding: 0;  
margin:  0;  
} 

.pics img {  
padding: 0px;  
border:  none;  
background-color: #ffffff;  
height:  450px;  
width:   1000px;  
top:  0; 
left: 0;
}

#caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color:#2769b5;
}

Любая помощь, которую кто-либо может оказать, будет более ценной, чем вы можете себе представить. Я знаю, что это, вероятно, простая вещь, но я, честно говоря, исчерпал свои ресурсы (и около 15 страниц результатов Google!). Заранее благодарим за любую помощь, которую вы можете предложить.

Тереза ​​

ДОБАВЛЕНО 1/13:

Пересмотрел мой код, как указано ниже, но все еще не работает (jsfiddle ниже работает отлично, именно то, что я ищу, но даже с прямым копированием / вставкой, не работающим на моем конце). Я уверен, что-то очевидное, но изо всех сил. Вот мой исправленный код js и соответствующая информация в моем заголовке (html и css остались прежними): 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}

$('#next2, #prev2').hover( 
function() { 
    $('#s2').cycle('pause'); 
}, 
function() { 
    $('#s2').cycle('resume'); 
} 
);

</script>

Ответы [ 2 ]

1 голос
/ 08 января 2012

Во-первых, удалите pause: 1 из опций - это то, что заставляет его приостанавливаться при наведении изображения.Затем:

Чтобы сделать паузу, вы можете использовать: 

$('#s2').cycle('pause')

, а для возобновления вы можете использовать: 

$('#s2').cycle('resume')

Этот код должен достичь того, что вы ищетеделать: 

$('#next2, #prev2').hover( 
    function() { 
        $('#s2').cycle('pause'); 
    }, 
    function() { 
        $('#s2').cycle('resume'); 
    } 
);
0 голосов
/ 20 августа 2014

для цикла 2, приостановленного при наведении, которое вы только добавили: 

...
data-cycle-pause-on-hover: "#s2",
...
...