Question

我正在搜索带有缩略图和自动淡入淡出功能的特殊内容推子。通过搜索网络我发现了很多东西，但不是我想要的东西。大多数时候你可以滑动内容但不褪色，如果你可以褪色，你只能褪色图片。我尝试使用easing-Plugin，但这不能褪色，只能滑动。然后我尝试“Galleria”，在这里你不能褪色文字或其他东西，只有图像。

就是这样：我有一些div有一些文字（h，p，按钮等）我想褪色。我想通过点击缩略图来淡化，但内容也会自动消失。

谢谢你的回答！

安德烈亚斯

Answer 1

这是让它与你拥有的东西一起工作的快捷方式：

$('#teaser-thumbs li').click(function(){
   var teaserDiv = '#' + $(this).children('a img').children('img').attr('title');
   $(this).fadeOut('slow');
   $(teaserDiv).fadeOut('slow');
});

它需要某种方式将缩略图与DIV相关联，因此我必须在缩略图中添加TITLE属性，如下所示：

<div id="teaser-thumbs">
    <ul>
        <li><a><img src="teaser1_thumb.jpg" alt="" title="teaser1" /></a></li>
        <li><a><img src="teaser2_thumb.jpg" alt="" title="teaser2" /></a></li>
        <li><a><img src="teaser3_thumb.jpg" alt="" title="teaser3" /></a></li>
    </ul>
</div>

如果您的缩略图和DIV总是与彼此直接相关，则表示您的第一个<li>始终与<div>下的第一个#mainteaser“关联” ，您可以放弃标题属性并使用以下代码：

$('#teaser-thumbs li').click(function(){
   var teaserDiv = $(this).index();
   $(this).fadeOut('slow');
   $('#mainteaser div:eq('+teaserDiv+')').fadeOut('slow');
});

Answer 2

这是我的div的代码

这是HTML：

<div id="mainteaser">
    <div id="teaser1">
        <h2>Loremipsum 1</h2>
        <p>Nam liber tempor cum soluta nobis eleifend option congue
        nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cumsoluta nobis eleifend option congue nihil imperdiet doming id quod</p>
        <div class="button"><a href="#">more ...</a></div>
    </div>
    <div id="teaser2">
    <h2>Loremipsum 2</h2>
    <p>Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p>
    <div class="button"><a href="#">more ...</a></div>
    </div>
    <div id="teaser3">
    <h2>Loremipsum 3</h2>
    <p>Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p>
        <div class="button"><a href="#">more ...</a></div>
    </div>  
</div>

<div id="teaser-thumbs">
    <ul>
    <li><a href="#"><img src="teaser1_thumb.jpg" alt="" /></a></li>
    <li><a href="#"><img src="teaser2_thumb.jpg" alt="" /></a></li>
    <li><a href="#"><img src="teaser3_thumb.jpg" alt="" /></a></li>
    </ul>
</div>

id为“teaser1”等的div。我想通过点击div“teaser-thumbs”中的缩略图来淡化。但另外“预告片”必须自动消失。

具有缩略图和自动淡入淡出的JQuery内容推子

2 个答案: