Как сделать слайд-шоу, которое находится во время загрузки, и при наведении на него остановки

90
7

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

<div id="slideshow">
<a href="#" class="slideshow-prev">«</a>
<ul>
<li><img src="images/1.jpg" alt="photo1" /></li>
<li><img src="images/2.jpg" alt="photo2" /></li>
<li><img src="images/3.jpg" alt="photo3" /></li>
<li><img src="images/4.jpg" alt="photo4" /></li>
<li><img src="images/5.jpg" alt="photo5" /></li>
</ul>
<a href="#" class="slideshow-next">»</a>
</div>
<script>

//an image width in pixels
var imageWidth = $('#slideshow ul li').width();

//DOM and all content is loaded
$(window).ready(function() {

var currentImage = 0;

//set image count
var allImages = $('#slideshow li img').length;

//setup slideshow frame width
$('#slideshow ul').width(allImages*imageWidth);

//attach click event to slideshow buttons
$('.slideshow-next').click(function(){

//increase image counter
currentImage++;
//if we are at the end let set it to 0
if(currentImage>=allImages) currentImage = 0;
//calcualte and set position
setFramePosition(currentImage);

});

$('.slideshow-prev').click(function(){

//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if(currentImage<0) currentImage = allImages-1;
//calcualte and set position
setFramePosition(currentImage);

});

});

//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos){

//calculate position
var px = imageWidth*pos*-1;
//set ul left position
$('#slideshow ul').animate({
left: px
}, 300);
}
</script>

Я только что создал div для моего слайд-шоу. Ниже у меня есть сценарий, чтобы сделать это слайд-шоу работоспособным, используя следующую и предыдущую стрелки. Я хочу сделать тот же слайд, чтобы работать с автоматическим слайд-шоу, и при наведении его остановить. Кто-нибудь может помочь мне, как мне это сделать? как я начинаю к этому. Если возможно, может кто-то, пожалуйста, предоставьте мне код JavaScript, который будет автоматически воспроизводить слайд-шоу

спросил(а) 2016-03-28T12:19:00+03:00 4 года, 6 месяцев назад
1
Решение
113

Используйте нижеприведенный код внутри тега скрипта:

var time;
$(window).load(function(){
time = setInterval(function(){
$('.slideshow-next').trigger('click');
},5000);

$('#slideshow').hover(function(){
clearInterval(time);
},function(){
time = setInterval(function(){
$('.slideshow-next').trigger('click');
},5000);
});
});

ответил(а) 2016-03-28T17:43:00+03:00 4 года, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема