/ / how to stop jquery imageslider na zawisie myszy - javascript, jquery, html, css

jak zatrzymać obiekt jquery imageslider po najechaniu kursorem myszy - javascript, jquery, html, css

to jest moja strona internetowa: http://daplonline.in/index5.php

Mam jquery z: http://designm.ag/tutorials/image-rotator-css-jquery/

chcę zatrzymać automatyczne wyłączanie suwaka, gdy użytkownik najeżdża myszką Małe zdjęcie kciuka bieżący slajd jest automatyczne i użytkownik nie może odczytać obrazu

Chcę zrobić automatyczne, ale gdy kliknięcie myszą lub kliknięcie myszą na małym suwaku obrazu musi się zatrzymać.

mój kod jquery jest tutaj

    <script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions

$(document).ready(function() {

// Comment out this line to disable auto-play
intervalID = setInterval(cycleImage, slidetime);

$(".main_image .desc").show(); // Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity

// Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass("active");
$(".image_thumb ul li").click(function(){
// Set Variables
var imgAlt = $(this).find("img").attr("alt"); //  Get Alt Tag of Image
var imgTitle = $(this).find("a").attr("href"); // Get Main Image URL
var imgDesc = $(this).find(".block").html();    //  Get HTML of block
var imgDescHeight = $(".main_image").find(".block").height();   // Calculate height of block

if ($(this).is(".active")) {  // If it"s already active, then...
return false; // Don"t click through
} else {
// Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}

$(".image_thumb ul li").removeClass("active"); // Remove class of "active" on all lists
$(this).addClass("active");  // add class of "active" on this list only
return false;

}) .hover(function(){
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});

// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});

// Function to autoplay cycling of images
// Source: http://stackoverflow.com/a/9259171/477958
function cycleImage(){
var onLastLi = $(".image_thumb ul li:last").hasClass("active");
var currentImage = $(".image_thumb ul li.active");


if(onLastLi){
var nextImage = $(".image_thumb ul li:first");
} else {
var nextImage = $(".image_thumb ul li.active").next();
}

$(currentImage).removeClass("active");
$(nextImage).addClass("active");

// Duplicate code for animation
var imgAlt = $(nextImage).find("img").attr("alt");
var imgTitle = $(nextImage).find("a").attr("href");
var imgDesc = $(nextImage).find(".block").html();
var imgDescHeight = $(".main_image").find(".block").height();

$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
};

});// Close Function
</script>

Odpowiedzi:

5 dla odpowiedzi № 1

Spróbuj tego,

$(".image_thumb ul li").on("mouseover",function(){
clearInterval(intervalID);
});

$(".image_thumb ul li").on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});

dodaj to na końcu twojego kodowania ...


2 dla odpowiedzi nr 2

Dodaj ten kod na końcu skryptu. Domyślam się, że kursor myszy zatrzyma suwak, ale nie jestem pewien, czy mouseout działa czy nie. Po prostu spróbuj i daj mi znać o wyniku.

$(".main_image").on("mouseover",function(){
clearInterval(intervalID);
});

$(".main_image").on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});

Dodanie powyższych linii spowoduje, że kod będzie wyglądał jak poniżej:

    <script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions

$(document).ready(function() {

// Comment out this line to disable auto-play
intervalID = setInterval(cycleImage, slidetime);

$(".main_image .desc").show(); // Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity

// Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass("active");
$(".image_thumb ul li").click(function(){
// Set Variables
var imgAlt = $(this).find("img").attr("alt"); //  Get Alt Tag of Image
var imgTitle = $(this).find("a").attr("href"); // Get Main Image URL
var imgDesc = $(this).find(".block").html();    //  Get HTML of block
var imgDescHeight = $(".main_image").find(".block").height();   // Calculate height of block

if ($(this).is(".active")) {  // If it"s already active, then...
return false; // Don"t click through
} else {
// Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}

$(".image_thumb ul li").removeClass("active"); // Remove class of "active" on all lists
$(this).addClass("active");  // add class of "active" on this list only
return false;

}) .hover(function(){
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});

// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});

// Function to autoplay cycling of images
// Source: http://stackoverflow.com/a/9259171/477958
function cycleImage(){
var onLastLi = $(".image_thumb ul li:last").hasClass("active");
var currentImage = $(".image_thumb ul li.active");


if(onLastLi){
var nextImage = $(".image_thumb ul li:first");
} else {
var nextImage = $(".image_thumb ul li.active").next();
}

$(currentImage).removeClass("active");
$(nextImage).addClass("active");

// Duplicate code for animation
var imgAlt = $(nextImage).find("img").attr("alt");
var imgTitle = $(nextImage).find("a").attr("href");
var imgDesc = $(nextImage).find(".block").html();
var imgDescHeight = $(".main_image").find(".block").height();

$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
};

$(".main_image").on("mouseover",function(){
clearInterval(intervalID);
});

$(".main_image").on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});


});// Close Function
</script>

0 dla odpowiedzi № 3

musisz wyczyścić przedział obrotu obrazu:

$(function(){
var stop;
function rotate(){
stop = setInterval(change, 1000);
}
rotate();
//Use the event you want to stop image rotation
$("#ok").click(function(){
clearInterval(stop);
});
});

0 dla odpowiedzi nr 4
$( "..." ) .mouseover(function() {
//Stop the animation here
$( "..." ).stop();
}).mouseout(function() {
//Do your animation here
$( "...").animate();
});