jQuery crossfade 2图像缩略图点击-6ren

jQuery crossfade 2图像缩略图点击

转载作者：行者123 更新时间：2023-11-27 22:35:52

我正在努力让我的淡入/淡出比现在更平滑 > JSFIDDLE

目前它在淡入淡出图像时非常锐利(因为它似乎在第二张图像开始之前先淡出第一张图像)。

JS:

$(document).ready(function() {
    $('#thumbImgs').hoverscroll({
        fixedArrows: true,
        vertical : true,
        width: 250,
        height: 600,
        arrows: false,
        rtl: true,
        thespeed: 30
    });
});

$("#thumbImgs li").live('click', function(e) { 
    var largeImgURL = $(this).attr('id');

    $('#bigPic').fadeOut('fast');
    $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">');
});

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>HoverScroll Test Page</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js"></script>    
</head>
<body>
    <h1>HoverScroll Test Page</h1>

    <div id="theThumbs">
      <ul id="thumbImgs">
        <li id="img1.jpg"><img src="http://www.zzzz.com/test/img1_tmb.jpg" width="120" height="120" alt=""></li>
        <li id="img2.jpg"><img src="http://www.zzzz.com/test/img2_tmb.jpg" width="120" height="120" alt=""></li>
        <li id="img3.jpg"><img src="http://www.zzzz.com/test/img3_tmb.jpg" width="120" height="120" alt=""></li>
        <li id="img4.jpg"><img src="http://www.zzzz.com/test/img4_tmb.jpg" width="120" height="120" alt=""></li>
        <li id="img5.jpg"><img src="http://www.zzzz.com/test/img5_tmb.jpg" width="120" height="120" alt=""></li>
      </ul>
    </div>

    <div id="bigPic">
        <img src="http://www.zzzz.com/test/img1.jpg" width="1000" height="700" alt="">
    </div>

<script type="text/javascript">

    $(document).ready(function() {
        $('#thumbImgs').hoverscroll({
            fixedArrows: true,
            vertical : true,
            width: 250,
            height: 600,
            arrows: false,
            rtl: true,
            thespeed: 30
        });
    });

    $("#thumbImgs li").live('click', function(e) { 
        var largeImgURL = $(this).attr('id');

        $('#bigPic').fadeOut('fast');
        $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">');
    });

</script>
</body>
</html>

任何帮助都会很棒!谢谢!

最佳答案

通常，当交叉淡入淡出时，它发生在多个元素之间。从您的示例中，您试图在 1 个元素之间交叉淡入淡出。

查看以下 fiddle ，它可能会为您指明一个好的方向。 http://jsfiddle.net/Nv6gp/2/

$('#thumbImgs').on('click', 'li', fade);

var imgs = $('#imgs li');

function fade(e) {
    var _self = imgs.eq($(e.currentTarget).index());

    imgs.fadeOut();
    _self.fadeIn();
}

关于jQuery crossfade 2图像缩略图点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13845644/

全站热门文章

首页

博学

6Ren·AI

商城

jQuery crossfade 2图像缩略图点击