0

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

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

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

并在以下位置实施：

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

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

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

4

4 回答 4

2

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

示例 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 类设置当前帧的样式。

于 2012-12-03T19:33:54.727 回答
-1

像这样的东西：

CSS

.slider-target img    {opacity:0.8;}

查询

$('body').on('mouseenter', '.slider-target img', function () {
    $(this).css( "opacity", "1.0" );
}).on('mouseleave', '.slider-target img', function () {
    $(this).css( "opacity", "0.8" );
});
于 2012-12-03T19:22:06.723 回答
-1 
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，此代码应该可以工作

于 2012-12-03T19:22:20.450 回答
-1

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

$(document).ready(){

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


}

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

于 2012-12-03T19:25:44.900 回答