Question

这是我的网站演示：http://daplonline.in/index5.php

我从http://designm.ag/tutorials/image-rotator-css-jquery/

得到了这个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>

Answer 1

试试这个，

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

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

在编码结束时添加此内容...

Answer 2

在脚本的末尾添加此代码..我猜鼠标悬停会暂停滑块，但我不确定鼠标输出是否有效。只需尝试一下，让我知道结果。< / p>

$('.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>

Answer 3

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

Answer 4

您需要清除图像旋转的间隔：

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

如何在鼠标悬停时停止jquery图像滑块

4 个答案: