Question

我正在使用光滑的滑块来显示图像。目前，我有它，所以你可以点击导航，它会改变主图像显示。

我试图让它在悬停事件或鼠标悬停事件上设置当前选定的导航。

这是我目前的导航和显示代码：

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".NavigationDrawerFragment">


    <ListView
           android:layout_height="0dp"
           android:layout_weight="1"
           android:layout_width="match_parent"
           android:divider="@android:color/transparent"
           android:dividerHeight="0dp"
           android:background="#cccc"
           android:choiceMode="singleChoice"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Help"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Settings"/>
    </LinearLayout>

</LinearLayout>

and this is my fiddle

是否可以将鼠标悬停事件绑定到光滑？

Answer 1

应该可以。以前从未使用过光滑但在第一个视图上看起来好像没有实现悬停功能。我已经创建了一个快速基本的方法，你可以用光滑的方法来解决这个问题。看小提琴。你应该优化获得光滑的对象，它只是你的起点。此外，您应该在悬停并重新启动它时中断自动播放，只需尝试使用光滑的给定方法。

$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget), 
    index = $currTarget.data('slick-index'),
    slickObj = $('.slider-for').slick('getSlick');

slickObj.slickGoTo(index);

});

Working fiddle

Answer 2

使用以上答案作为基础，我能够提出这个解决方案。这可以解决以下问题：快速从导航幻灯片＃1滑到＃3并在幻灯片＃2上放置用于滑动的滑块。

var slideTimer;
    $('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
        var $currTarget = $(e.currentTarget);
        $('.slider-nav .slick-slide').removeClass('slick-current');
        $currTarget.addClass('slick-current');

        slideTimer = setTimeout(function () {
            var index = $('.slider-nav').find('.slick-current').data('slick-index');
            var slickObj = $('.slider-for').slick('getSlick');
            slickObj.slickGoTo(index);
        }, 500);
    }).on('mouseleave', '.slick-slide', function (e) {
        clearTimeout(slideTimer);
    });

Slick Slider绑定悬停事件

2 个答案: