これは私のウェブサイトのデモです： http://daplonline.in/index5.php
私はこのjqueryを得た： http://designm.ag/tutorials/image-rotator-css-jquery/
ユーザーがマウスを動かすと自動的にスライダーが停止するようにしたい小さなサム画像現在のスライドは自動で、ユーザーは画像を読むことはできません
自動化したいのですが、小さな画像スライダーでユーザーがクリックまたはマウスを動かしたときに停止する必要があります。
私のjQueryコードはここにあります
<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>
回答：
回答№1は5これを試して、
$(".image_thumb ul li").on("mouseover",function(){
clearInterval(intervalID);
});
$(".image_thumb ul li").on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
コーディングの最後にこれを追加してください...
回答№2については2
スクリプトの最後にこのコードを追加します。マウスオーバーはスライダーを一時停止しますが、mouseoutが機能するかどうかわかりません。ちょうど試してみて、結果を教えてください。
$(".main_image").on("mouseover",function(){
clearInterval(intervalID);
});
$(".main_image").on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
上記の行を追加すると、以下のコードが作成されます：
<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>
回答№3の場合は0
イメージの回転間隔をクリアする必要があります。
$(function(){
var stop;
function rotate(){
stop = setInterval(change, 1000);
}
rotate();
//Use the event you want to stop image rotation
$("#ok").click(function(){
clearInterval(stop);
});
});
回答№4の場合は0
$( "..." ) .mouseover(function() {
//Stop the animation here
$( "..." ).stop();
}).mouseout(function() {
//Do your animation here
$( "...").animate();
});