Tag: 滑块

光滑的滑块 – 同步自动播放和主动导航: 我正在尝试使用光滑的Slider来创建一个滑块，允许用户选择该部分的标题并查看它的幻灯片，同时也为其提供自动播放选项。这些东西很好用。但我需要一些方法来对应，使它在自动播放时，它对应于活动导航并更改颜色。现在，如果用户点击它，它只显示活动幻灯片标题的新颜色。我希望它也能在自动播放上这样做我该怎么做？这是我现在正在使用的代码 Js Bin 我唯一改变的是浮动滑块演示中不存在的自动播放选项 $(‘.slider-for’).slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: ‘.slider-nav’, autoplay:true }); $(‘.slider-nav’).slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: ‘.slider-for’, dots: true, centerMode: true, focusOnSelect: true });

将鼠标滚轮绑定到Jquery UI滑块: 我做了搜索，有一些类似的post，但我似乎无法让它工作。我知道这是陈词滥调，但我是JQuery和JQuery UI的新手，因为我的核心技能是PHP，所以任何帮助都非常感谢。下面是我对JQuery垂直滑块的代码。 $(“#VerticalScrollBar”).slider({ orientation: “vertical”, change: VerticalHandleChange, slide: VerticalHandleSlide, min: -100, max: 0 }); 和function function VerticalHandleChange(e, ui) { var maxScroll = $(“.VerticalScroll”).attr(“scrollHeight”) – $(“.VerticalScroll”).height(); $(“.VerticalScroll”).animate({ scrollTop: -ui.value * (maxScroll / 100) }, 1000); function VerticalHandleSlide(e, ui) { var maxScroll = $(“.VerticalScroll”).attr(“scrollHeight”) – $(“.VerticalScroll”).height(); $(“.VerticalScroll”).attr({ scrollTop: -ui.value * (maxScroll / 100) }); 垂直滑块工作正常，但现在我需要集成鼠标滚轮支持。 […]

jQuery圆形滑块: 我想做一个圆形的滑块，如下图所示。 jQuery能够做到这一点吗？我知道一个直滑块如何工作，但我想制作一个HTML5圆形滑块。这是我在网上找到的http://jsfiddle.net/XdvNg/1/ – 但我不知道如何获得用户放下的滑块值

如何使用jQuery在div / on页面上滑动div: 我正在尝试创建一个函数，根据单击的按钮/链接在页面上滑动div。基本结构： Click Box #1 Click Box #2 Click Box #3 Box #1 Box #2 Box #3 目前我正在使用 $(‘.button’).click(function() { $(‘.box’).each(function() { 但是当然只能作为一种循环，它只滑动第一个和最后一个div，我怎么能让每个按钮滑出然后在适当的div中。我到目前为止的例子： http ： //jsfiddle.net/ykbgT/538/

jQuery Slider – 进度条: 类似于：带有进度条的Jquery滑块我有这个滑块和进度条，但我希望进度条与“上一个”和“下一个”按钮同步。因此，当您单击“下一步”时，进度条将从头开始。 http://jsfiddle.net/aidenguinnip/8rJws/ $(window).load(function(){ var currentIndex = 0;// store current pane index displayed var ePanes = $(‘#slider .panel’), // store panes collection time = 3000, bar = $(‘.progress_bar’); function showPane(index){// generic showPane // hide current pane ePanes.eq(currentIndex).stop(true, true).fadeOut(); // set current index : check in panes collection length currentIndex = index; if(currentIndex = […]

多个jquery滑块: 我正在努力使用多个jQuery滑块 – 在这种情况下，如果一个滑块增加，则其他滑块相应减小。滑块正在动态创建。我尝试过很多例子，但没有运气。我将解释这个场景，如果有3个滑块，每个设置为500,1000,1500，如果我将第一个滑块的值增加到100（500 + 100）那么100应该从其他两个（每个50个）减少。我检查了http://jsfiddle.net/jenishkottaram/sNfBM/14/和http://jsfiddle.net/Y5ZLL/400/，但在我的情况下没有帮助。任何帮助都应该非常感谢。谢谢 //滑块从这里开始 drawSlider: function(elementId, sliderMax, sliderVal, rate) { $(“#” + elementId).each(function() { $( this ).empty().slider({ range: “max”, min: 0, max: sliderMax, value: sliderVal, step: 100, slide: function(event, ui) { // Update display to current value $(this).siblings().text(ui.value); // Get current total var total = […]

试图在旋转木马中显示Instagram图像 – 如何在图像加载完成后加载旋转木马？: 我觉得这应该非常简单，但实现它却遇到了难以置信的麻烦。我正在使用Javascript插件Instafeed将Instagram图像拉入页面 – 这很好用。图像加载后，我想把它们放进旋转木马。我有一个JSFiddle显示这里发生了什么。生成的文档中应该发生的是： IMAGE IN HERE IMAGE IN HERE IMAGE IN HERE 相反，这种情况正在发生： IMAGE IN HERE IMAGE IN HERE IMAGE IN HERE 从本质上讲，轮播似乎是在Instafeed之前或同时加载，因此它永远不会“看到”容器内的图像，并且最终没有正确嵌套并且没有应用类。因此，它将其类（slick-initialized和slick-slider）附加到父容器，并且不会正确地格式化任何子项。我已经尝试将Instafeed脚本放在头部并在窗口加载时启动它。这没什么区别。有没有办法让我的转盘只在Instagram照片加载时加载？或者，如果没有将回调等等构建到插件本身中，这是不可能的？有一个简单的方法吗？任何帮助，将不胜感激！

制作没有递归的滑块: 鉴于以下jsFiddle，如何在不构建堆栈的情况下实现与我相同的效果？ http://jsfiddle.net/YWMcy/1/ 我尝试过这样的事情： jQuery(document).ready(function () { ‘use strict’; (function ($) { function validateOptions(options) { if (typeof(options.delay) == typeof(0)) { $.error(‘Delay value must an integer.’); return false; } else if (options.delay < 0) { $.error('Delay value must be greater than zero.'); return false; } if (typeof(options.direction) == typeof('')) { $.error('Direction value must be a string.'); return […]

如何在javascript / jquery中应用运动模糊？: 我想知道如何在javascript / jquery中制作运动模糊。我有一个水平画廊，我想在图像移动时应用运动模糊。实际上，它以这种方式完美地工作：具有运动模糊（photoshop）的叠加图像和不透明度根据图像的速度而变化。渲染看起来很不错，但我需要加载2次我的所有图像，它很糟糕。在html中：

如何重新初始化flexslider以进行动态加载: 我遇到了flexslider的问题，我需要从web服务下载base64中的图片。下载完成后，我创建一个.append()来添加我的幻灯片…… 但有时，一切都完美添加，但滑块没有正确重新加载所以我得到这样的代码：而不是像这样的代码：在这种情况下，如何重新启动滑块？