程序员经验分享-hwhale

如何使我的猫头鹰旋转木马方向跟随鼠标滚轮方向

2023-12-30

当我滚动鼠标滚轮时，它会移动，但是当我更改滚动方向时，它不会改变其方向。 如何使猫头鹰旋转木马方向跟随鼠标滚轮方向？ 当我滚动鼠标滚轮时，它会移动，但是当我更改滚动方向时，它不会改变其方向。 如何使猫头鹰旋转木马方向跟随鼠标滚轮方向？

var owl = $('.owl-carousel');
owl.owlCarousel({
    loop: true,
    margin: 10,
    padding: 10,
    responsiveClass: true,
    rtl: false,
    stagePadding: 100,
    smartSpeed: 550,
    autoplay: true,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    nav: true,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: true
        },
        600: {
            items: 3,
            nav: true
        },
        1000: {
            items: 5,
            nav: true,
            
        }
    }
})
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY > 0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
html{
            width: 100vw;
            background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
        }
    .demo-container{
        margin-top: 5em;
        background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
    }
    .owl-carousel .owl-stage-outer{
        overflow: visible;
    }
    .sb-carousel-wrap {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
    position: absolute;
    top: 0;
    width: 105px;
    height: 100%;
    z-index: 10;
}
.brand-carousel-gradient.left {
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
	overflow: hidden;
}
.sb-car-img:hover img{
     transform: scale(1.2);
}

.sb-itm-img  {
  	transition: all 0.6s ease-in 0s;
	-webkit-transition:  all 0.6s ease-in 0s;
	-ms-transition:  all 0.6s ease-in 0s;
}
.my-slider{
	float: left:
	width:100%;
	padding: 0 15px;
	overflow: hidden;
}
<div class="my-slider">
<div class="sb-carousel-wrap">
        <div class="brand-carousel-gradient left"></div>
        <div class="brand-carousel-gradient right"></div>
       <div class="demo-container">
         <div class="owl-carousel owl-theme">
    
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
             </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
    
        </div>
    </div>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

我遇到过同样的问题。

在 Chrome 开发者工具 (F12) 中，使用日志检查滚轮事件：

console.log(e);

这会告诉你e.deltaY事件对象中不存在。然而，该物业e.originalEvent确实如此，并且e.originalEvent.deltaY存在于此处。

因此，将回调更改为：

    ...
    if (e.originalEvent.deltaY > 0) {
    ...

现在滚动应该可以在两个方向上正常工作。

[编辑] 我研究了让它在 IE(11) 中工作。 IE11显示滚轮事件对象属性e.originalEvent.wheelDeltaChrome 对象中不存在，并且它的使用方式与deltaY.

在这种情况下，我们可以使用

    ...
    if (e.originalEvent.wheelDelta> 0) {
    ...

它应该适用于 Chrome 和 IE11。

为了在 Firefox 中也能正常工作，需要一个不同的回调事件和属性：

回调是DOMMouseScroll要测试的属性是e.originalEvent.detail， 如下：

owl.on('DOMMouseScroll','.owl-stage',function(e){
    if (e.originalEvent.detail > 0){
        owl.trigger('next.owl');
    } 
    else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

作为旁注，我查看了 Owl 演示，它确实按照文档中的描述运行，使用 e.deltaY。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

carousel

owlcarousel

mousewheel

如何使我的猫头鹰旋转木马方向跟随鼠标滚轮方向 的相关文章

  • Android 中的 3D 轮播

    我正在为 Android 开发 3D Carousel 我正在用这个code http www codeproject com Articles 146145 Android 3D Carousel以下是我当前的输出 我想开发以下3D形状的

  • 轮播引导程序不起作用

    有人可以帮助我吗 我正在测试引导轮播 但它不起作用 具体来说 上一张 下一张按钮不起作用 轮播不会滑到下一张幻灯片 这是我页面的代码 但我不知道我做错了什么

  • 记录鼠标中键和滚轮滚动

    我创建了一个类来记录鼠标操作 例如用鼠标记录任务 将鼠标移至此处并单击左键在那里 记录鼠标操作 任务后 我可以使用我创建的线程从类中重现它 我需要的是实现鼠标中键和滚轮滚动 但我不知道如何做到这一点 对我来说有点难以使用和理解 获取异步键状

  • Bootstrap 轮播上的动画高度变化 (v2.3.2)

    我正在尝试使用 Bootstrap 的轮播来处理高度不同的内容 高度会根据浏览器宽度而有所不同 并且轮播下方有内容 我想使用 CSS 来动画幻灯片之间的高度变化 在朋友的帮助下 我几乎可以在 FireFox 中实现此功能 第一张幻灯片跳转

  • 将 MouseWheel 消息发送到 System.Windows.Forms.WebBrowser

    我想转发MouseWheel在表单级别生成的事件 以便它们将由嵌入式处理WebBrowser控件 即使该控件没有焦点 这是我所做的 实施的IMessageFilter PreFilterMessage 注册了过滤器Application A

  • Owl-Carousel2 - 设置点数据

    我需要在猫头鹰旋转木马中设置自定义点 我在 JS 中有这样的代码 document ready function header slider owlCarousel loop true autoplay true autoplayTimeo

  • Angular 与 ui.bootstrap 渲染空白页面

    我使用 Yeoman 创建了一个包含 bootstrap 的 Angular 应用程序 然后 我使用 Bower 按照自述文件中的说明安装 ui bootstraphttps github com angular ui bootstrap

  • jquery mousewheel插件：如何每次滚动仅触发一个功能

    我正在使用 moushweel 插件 因为我希望我的用户每次向上或向下滚动时都会触发一个操作 但我不想多次触发 如果您有苹果魔术鼠标 情况会更糟 因为太敏感 关于如何预防它有什么想法吗 这是代码 jQuery function div mo

  • 利用 Bootstrap Carousel“slide”事件和 .next 类

    所以我遇到了一个小问题 类似于我前几天发布的这个问题 http bit ly 11JpbdY http bit ly 11JpbdY 在加载时隐藏的一段内容上使用 SlabText 这次 我试图让slabText 更新滑块中某些内容的显示

  • 猫头鹰旋转木马 2 内部引导手风琴仅适用于窗口大小调整？

    我正在使用猫头鹰旋转木马 2 我想在 Bootstrap Accordion 面板内加载 Owl Carousel 我的代码是这样的 HTML 代码 div class panel group users block accordion d

  • 是否可以使用 owl carousel 实现圆形/无限轮播？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在使用猫头鹰旋转木马 它工作完美 只是它不支持循环 无限滚动 我确实在谷歌和 stackoverflow 上搜索过想法 但没有运气

  • Bootstrap 轮播转换和上一个/下一个按钮不起作用

    我正在尝试实现 twitter bootstrap 轮播 但它不起作用 它不会自动切换图像 并且上一个 下一个按钮不起作用 我尝试按照建议切换到 jquery 1 7 1Bootstrap 轮播不自动滑动 https stackoverfl

  • 猫头鹰轮播 2 - 标题 div（img 标题和 alt 标签）

    我正在寻找一种方式来显示img标题 alt中的标签div image caption 到目前为止 这是我的代码 owl on changed owl carousel function event var comment this find

  • 在 iCarouselTypeRotary 视图中隐藏背面图像

    我已将图像设置为轮播 https github com nicklockwood iCarousel 当我滚动轮播时 它会显示正面和背面的图像 我不想在后面显示图像 请帮忙 谢谢 您应该实现委托 CGFloat carousel iCaro

  • 使用一个控件将两个 Twitter Bootstrap 轮播链接在一起

    我刚刚学习 javascript 所以请耐心等待 我正在尝试使用相同的控件在引导程序中启动两个轮播 按照目前的设置方式 包含轮播 ID 的 href 标签控制着每个轮播 有人对如何使用相同的控件以最少的修改将两者链接在一起有建议吗 这是 H

  • 带猫头鹰旋转木马的 Fancybox (lazyLoad)

    我正在使用带有lazyLoad选项的Fancybox v3 5 4和Owl carousel v2 3 4 当我们点击照片时 Fancybox 就会弹出照片 然后 如果我们点击几次 下一步 以获取 Fancybox 上的下一张照片 然后关闭

  • 在 Twitter Bootstrap 轮播中显示下一张和上一张图像

    我正在寻找一种在 Twitter Bootstrap 轮播中显示下一张和上一张幻灯片图像的方法 默认情况下 它只显示当前图像 如果我删除 display none css 属性 则轮播中的每个项目都在彼此下方 我尝试过使用 CSS 但还没有

  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot

  • 猫头鹰旋转木马无法在响应模式下工作

    我在网站上安装了猫头鹰 在桌面模式下完美运行 但在移动模式下 幻灯片似乎完全消失了 我的网站位于 ypt co il 大主滑块下方的 4 个块 首先在桌面模式下查看 这是插件代码 owl carousel owlCarousel loop

  • 如何根据上一张或下一张幻灯片按键更改 Nivo Slider 中的效果？

    我想根据按下的按钮更改 Nivo Slider 上的过渡效果 关于如何实现这一目标有什么想法吗 Update澄清一下 我指的是下一个或上一个按钮 而不是键盘上的按钮 我正在寻找的是 如果一个人按下下一个按钮 则会调用 slipToRight

随机推荐

热门标签