淡化除焦点图像以外的所有图像 - jQuery Slider答案

【问题标题】：Fade all images other than the focused image - jQuery Slider淡化除焦点图像以外的所有图像 - jQuery Slider
【发布时间】：2012-12-04 04:13:18
【问题描述】：

我已经设置了一个响应式滑块，并希望将焦点之外的所有图像都设为透明（不透明度 50%）。聚焦的图像将是最左侧的图像。

我使用了以下滑块插件：

http://matthewtoledo.com/creations/responsive-carousel/example/example-1.html

并在以下位置实施：

http://www.schafrick.com/portfolio-clients-nike.html

我的 jQuery 知识很差，我不确定从哪里开始。任何帮助将不胜感激。谢谢

请记住，当我说“专注”时，我指的不是鼠标通风口，而是指最左边的图像。

【问题讨论】：

首先，您需要弄清楚活动幻灯片是什么。显然，当您有导航时，您已经弄清楚了。一旦你知道了，你需要引用li 的data-slide 属性。我会使用 jQuery 将一个类仅应用于活动幻灯片，以便您可以使用 css 来处理不透明度。
我明白了，但不知道该怎么做。滑块基本上是一个包含在掩码 div 中的 ul，导航（下一个/后退）将 ul 向左或向右移动。
您是如何获得导航中的数字的？您如何确定它在哪张幻灯片上以显示“1/10”或“5/10”？
请看我的回答，它应该这样工作:)

标签： jquery

【解决方案1】：

轮播的创建者已经有了一些实现：

Example 2

onShift 方法是一个带有函数的设置参数。见：Docu
我为你改编了它：

$('#example').responsiveCarousel({
    // your setup tasks
    onShift: function (i) {
        i = Math.round(i);
        var $current = $('.slider-target li[data-slide=' + i + ']');
        $('.slider-target li[data-slide]').removeClass('current');
        $current.addClass('current');
    }
});

您可以使用 .current 类设置当前框架的样式。

【讨论】：

这似乎成功了。答案一直就在我的眼皮底下。谢谢！
我如何使用 onShift 方法来显示显示的图像数量以及它在哪个图像上（2/5）？您在我的网站上看到的数字计数有点错误，我已经有人帮我解决了。
"i+1" 是你想写在你的数字计数上的数字。您也可以在 onShift-Method 中覆盖它。另一个数字是最后一个元素的“数据幻灯片”属性加一。您可以使用文档中的 afterInit 函数或其他内容。

【解决方案2】：

类似这样的：

CSS

.slider-target img    {opacity:0.8;}

JQUERY

$('body').on('mouseenter', '.slider-target img', function () {
    $(this).css( "opacity", "1.0" );
}).on('mouseleave', '.slider-target img', function () {
    $(this).css( "opacity", "0.8" );
});

【讨论】：

他说的不是鼠标事件。

【解决方案3】：

jQuery('.slider-target li').hover(function(e)
{
    $(this).closest('ul').find('li').not(this).fadeTo(200, 0.5);
}, function()
{
    $(this).closest('ul').find('li').not(this).fadeTo(200, 1);
});

如果您包含 jquery，此代码应该可以工作

【讨论】：

“聚焦图像将是最左边的图像。”

【解决方案4】：

这样的东西应该可以工作xD

$(document).ready(){

  $("img#gallery").hover(function(){
    $(this).siblings("img").fadeTo("slow",0.5)
  },
  function(){
    $(this).siblings("img").fadeTo("slow",1)
  })


}

只需根据您的需要调整代码xD

【讨论】：

阅读问题。他没有问hover。
现在知道了，我想你应该在那个箭头按钮的点击事件上做点什么，确定哪个图像被移到左边，然后改变它的不透明度