没有插件的jQuery crossfade

如何解决没有插件的jQuery crossfade

| 这里有很多东西指向用于做交叉渐变和东西的插件，但是没有一个真正适合我的需求。我的页面上有两件事：大图像，包含3个或4个小缩略图的div 单击缩略图时，它将读取src并将主图像源更改为新图像。我如何使它渐入淡出而另一种渐渐淡出（因此在新图像渐隐之前它不会消失）这是我的代码：

$(\'.TnImage\').live(\'click\',function() {
        var newImage = $(this).attr(\'src\');
        var oldImage = $(\'.mainImage\').attr(\'src\')
        $(\'.mainImage\').fadeOut(\'slow\');
        $(\'.mainImage\').attr(\'src\',newImage).fadeIn(\'slow\');
    });

只是为了澄清为什么我不想使用现有的插件，是大多数要求您事先知道要加载的图像列表，缩略图是通过PHP从MysqL 数据库中检索的，我宁愿不必使2列出一张缩略图和1张主图像，然后将除一个主div以外的所有图像都隐藏在我要显示的图像中。我看过一个自行车插件，但我不愿意使用它，我知道人们一直在不重新发明轮子，但是如果我继续使用插件来做事，我永远也不会学jQuery工作原理的基本要素。我曾经使用过出色的IMAGESWITCH，但无法与jquery 1.4.3一起使用，并且我需要此版本的html data（），因此以前依靠此功能，现在陷入困境，所以我为什么要问路不使用插件就可以做到这一点。

解决方法

jQuery循环将执行此操作，但这是一个插件。为了在没有插件的情况下执行此操作，可以加载图像，然后隐藏除第一个图像外的所有图像。单击缩略图时，然后淡出所选图像。我将在第一张图片中添加一个CSS类，以使其更容易实现。我还要给每个图像一个ID以引用它们。使用CSS将它们放在彼此的顶部。在缩略图标签中，您也需要对大图像的某种引用。

$(\'.TnImage\').live(\'click\',function() {
    $(\'.selected\').fadeOut(500,function(){
        $(this).removeClass(\'selected\');
    });
    $(\'#\'+$(this).attr(\'imgidref\')).delay(250).fadeIn(\'slow\').addClass(\'selected\');
});

我知道这是一个粗略的例子，但是它应该涵盖基本原理。 ,如果我理解了这个问题（除了希望避免使用插件：），jQuery Cycle应该完全按照您的意愿进行。结合使用fade过渡和pager选项。 http://jsfiddle.net/mattball/xM3cC/ ,由于没有关于没有插件的淡入淡出的答案，这是我想出的解决方案：

<!DOCTYPE html>
<html>
<head>

<script type=\"application/javascript\" src=\"jquery-1.9.1.js\"></script>
<script type=\"application/javascript\" src=\"jquery-ui-1.10.2.custom.min.js\"></script>

<link type=\"text/css\" rel=\"stylesheet\" href=\"jquery-ui-1.10.2.custom.min.css\" />

<title></title>

<script>
var list = new Array();
var increment = 0;

$(function(){
$.when(
    $(\"#image_preload img\").each(function(i,e){
        image = $(this).attr(\'src\');
        list.push(image);
    })
).then(function(){
    rotate()
});
});

function rotate(){
$(\"#deactive\").fadeOut(1000,function(){
});

$(\"#active\").attr(\'src\',list[increment]);

setTimeout(function(){
    increment++;

    if(increment == list.length){
        increment = 0;
    }

    $(\"#deactive\").attr(\'src\',list[increment]);

    $(\"#deactive\").fadeIn(1000,function(){
        rotate();
    });
},5000);
}
</script>

<style>
html,body {
margin: 0px;
padding: 0px;
}

#display {
margin: 0px auto;
position: relative;
text-align: center;
width: 220;
}

#display img {
left: 0px;
margin: 0px auto;
position: absolute;
top: 0px;
}

#image_preload {
display: none;
}
</style>

</head>
<body>

<div id=\"display\">
<img src=\"\" width=\"200\" height=\"200\" alt=\"\" id=\"active\" />
<img src=\"\" width=\"200\" height=\"200\" alt=\"\" id=\"deactive\" />
</div>

<div id=\"image_preload\">
<img src=\"1.png\" width=\"200\" height=\"200\" alt=\"\" />
<img src=\"2.jpg\" width=\"200\" height=\"200\" alt=\"\" />
<img src=\"3.png\" width=\"200\" height=\"200\" alt=\"\" />
<img src=\"4.jpg\" width=\"200\" height=\"200\" alt=\"\" />
<img src=\"5.jpg\" width=\"200\" height=\"200\" alt=\"\" />
</div>

</body>
</html>

可能不是世界上最好的，但是它很简单并且有效。这是JS Fiddle示例http://jsfiddle.net/DYYCy/

没有插件的jQuery crossfade

如何解决没有插件的jQuery crossfade

解决方法

相关推荐