无需插件的 Jquery 交叉淡入淡出

发布于 2024-11-02 01:12:21 字数 800 浏览 1 评论 0原文

这里有很多东西指向用于交叉淡入淡出之类的插件，但没有一个真正适合我的需求。

我的页面上有两件事：一个大图像，一个包含 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 个列表，一个用于缩略图，一个用于主图像，然后隐藏除了一个主要 div 以及我想要显示的图像之外的所有内容。

我看过一个循环插件，但我宁愿不要使用它，我知道人们一直在说不要重新发明轮子，但如果我继续使用插件来做东西，我永远不会学习坚果和jquery 如何工作的螺栓。我曾经使用过优秀的 IMAGESWITCH 但不能与 jquery 1.4.3 一起使用，并且我需要这个版本作为它的 html data() ，所以通过之前的依赖，我现在陷入了困境，所以为什么我要问一种方法来做到这一点不使用插件。

原文

a lot of stuff here pointing to plugins to do crossfades and stuff, but none really fit my needs.

i have 2 things on my page:
A large image, a div containing 3 or four small thumbnails

when a thumbnail is clicked it reads in the src and changes the main images source to the new image.

how do i get it to fade one in while the other fades out ( so it does not go to nothing before fading in the new image)

heres my code:

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

Just for clarification why i dont want to use existing plug-ins, is that most require you to know the list of images to be loaded in before hand, the thumbnail images are retrived from a mysql database through php, and i'd rather not have to make 2 lists one for the thumbnails and 1 for the main images then hiding all but the one main div with the image in i want showing.

i have had a look a cycle plugin but i'd prefewr not to use it, I know people keep going on about not reinventing the wheel, but if i keep using plugins to do stuff, i'm never going to learn the nuts and bolts of how jquery works. i used to use the excellent IMAGESWITCH but does not work with jquery 1.4.3, and i need this version for its's html data() and so by relieing on this previously, i am now stuck so why i have asked a way of doing this without using plugins.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一百个冬季 2024-11-09 01:12:21

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 will do this, but it is a plugin.

In order to do this without a plugin, you could load the images and then hide all but the first. When an thumbnail is clicked, you then fade out the selected image. I would add a css class to the first image to make it easier to do. I'd also give an id to each image to reference them. Use CSS to place them on top of each other. In your thumbnail image tag, you would need some sort of reference to the big image too.

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

I know this is a crude example, but it should cover the basic principles.

回复收藏 0 原文

妳是的陽光 2024-11-09 01:12:21

如果我理解这个问题（除了您希望避免使用插件:) jQuery Cycle 应该完全按照您的方式进行想。将 fade 过渡与 寻呼机选项。

http://jsfiddle.net/mattball/xM3cC/

回复收藏 0 原文

伏妖词 2024-11-09 01:12:21

由于没有关于没有插件的交叉淡入淡出的答案，因此这是我想出的解决方案：

<!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/

Since there hasn't been an answer about crossfading without a plugin, here is the solution that I came up with:

<!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>

May not be the best in the world, but it's simple and it works.

And here is the JS Fiddle Example http://jsfiddle.net/DYYCy/

回复收藏 0 原文

~没有更多了~