如何停止jquery imageslider在鼠标悬停 [英] how to stop jquery imageslider on mouse hover

问题描述

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

我有这个jquery： http： //designm.ag/tutorials/image-rotator-css-jquery/

当用户鼠标悬停在小拇指上时，我想停止滑块自动停止图片当前幻灯片是自动的，用户不能阅读图片的广告

我想让自动，但当用户点击或鼠标悬停在小图像滑块必须停止。 >

我的jquery代码在这里

 < script type =text / javascript > 
 var intervalId; 
 var slidetime = 2500; //自动转换之间的毫秒数
 
 $（document）.ready（function（）{
 
 //注释掉此行禁用自动播放
 intervalID = setInterval（cycleImage，slidetime）; 
 
 $（。main_image .desc）。show（）; //显示横幅
 $（。main_image .block）。animate opname：0.85}，1）; //设置不透明度
 
 //缩略图列表的单击和悬停事件
 $（。image_thumb ul li：first）addClass ）; 
 $（。image_thumb ul li）。click（function（）{
 //设置变量
 var imgAlt = $（this）.find（'img'）。attr （alt）; //获取图像的Alt标签
 var imgTitle = $（this）.find（'a'）。attr（href）; //获取主图像URL 
 var imgDesc = $（this）.find（'。block'）。html（）; //获取块的HTML 
 var imgDescHeight = $（。main_image）。find ）; //计算块的高度
 
 if（$（this）.is（。active））{//如果它已经处于活动状态，... 
 return false; //不要点击
} else {
 //动画预告片
 $（。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'）; //删除所有列表上的'active'类
 $（this）.addClass（'active'）; //在此列表中添加active类
 return false; 
 
}）.hover（function（）{
 $（this）.addClass（'hover'）; 
}，function（）{
 $ ）.removeClass（'hover'）; 
}）; 
 
 //切换预告片
 $（a.collapse）click（function（）{
 $（。main_image .block）。slideToggle（）; 
 $（a.collapse）。toggleClass（show）; 
}）; 
 
 //自动播放图片的功能
 //资料来源：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）。 
} 
 
 $（currentImage）.removeClass（active）; 
 $（nextImage）.addClass（active）; 
 
 //动画的重复代码
 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}）; 
}）; 
}; 
 
}）; //关闭函数
< / script> 
  

解决方案

试试这个，

  $（'。image_thumb ul li'）。on（mouseover，function（）{
 clearInterval（intervalID）; 
} ）; 
 
 $（'。image_thumb ul li'）。on（mouseout，function（）{
 intervalID = setInterval（cycleImage，slidetime）; 
}）; 
  

在编码结束时添加...

this is my website demo : http://daplonline.in/index5.php

i got this jquery from : http://designm.ag/tutorials/image-rotator-css-jquery/

i want to stop slider automatic to stop when user Mouse hover on Small thumb image current slide is automatic and user can't read image's advertise

i want to make automatic but when user click or mouse hover on small image slider must stop.

my jquery code is here

    <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>

解决方案

try this,

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

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

add this at the end of your coding...

这篇关于如何停止jquery imageslider在鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！