Jquery 鼠标悬停到鼠标点击

Question

我有 jquery 带有标签导航的图像幻灯片代码。它正在工作并在导航的鼠标悬停上滑动图像。我希望它在单击特定导航时起作用并显示它的图像

<script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            $(function () {
                $('.fadein img:gt(0)').hide();
                setInterval(function () {
                    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
                }, 5000);
                $('.banner-links-inner a').on({
                    'mouseenter': function () {
                        $('.fadein img').hide();
                        $('#' + $(this).data('id')).fadeIn();
                    }
                });
            });
        });//]]>  
    </script>

如何让它在单击而不是悬停时起作用？

Answer 1

试过这个吗？

 $('.banner-links-inner a').click(function () {
                        $('.fadein img').hide();
                        $('#' + $(this).data('id')).fadeIn();
                    });

而不是使用 on?

或者如果您想使用 on 更改为：

$('.banner-links-inner a').on({
                    'click': function () {
                        $('.fadein img').hide();
                        $('#' + $(this).data('id')).fadeIn();
                    }
                });

Answer 2

将此 'mouseenter' 更改为此 'click'

Answer 3

你可以通过替换

来做到这一点

'mouseenter':函数(){

和

'click':函数(){

并从锚标记中删除 href

<a  data-id="img1">POWEROCK 13600mAh Power Bank</a>

Jquery 鼠标悬停到鼠标点击

Jquery Mousehover to Mouse click

jquery

slider

slideshow