Question

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

我使用了以下插件作为滑块：

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

并将其实施于：

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

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

请记住，当我说“专注”时，我并不是指鼠标，而是在谈论最左边的图像。

Answer 1

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

Example 2

onShift-method是一个带有函数的设置参数。见：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类设置当前帧的样式。

Answer 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" );
});

Answer 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

，此代码应该有效

Answer 4

这样的事情应该适用于xD

$(document).ready(){

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


}

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

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

4 个答案: