1

我正在使用响应式网页设计，我想在页面中滑动一些图像。我尝试了一些插件，但插件的问题是它使用宽度和高度属性，有些还分配绝对位置。所以我想用js自己改变图像的src，效果很好，但是我可以给它一些过渡效果吗？

我所做的是：

var i =0;
var total =2;
window.setInterval(function(){
  show_hide();
}, 1000);

function show_hide()
{
        var img=$('.image-holder img, .image-holder2 img');
        //alert(img.length);
        if(i%2==0)
        {

             img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
             img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';

            i=0;
        }
        else
        {

             img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
             img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
        }

       i++;




}

我的 html

<div  class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />


</div>
<div  class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />
</div>
4

2 回答 2

1

回答标题，在更改 src 的同时给一个 fadeIn/fadeOut 很容易，只需让元素 fadeOut，更改 src 并让它再次淡入。另外，我想指出，使用 jQuery，遍历这样的类会破坏使用它自己的选择器“ .each()”的目的

$('.image-holder img, .image-holder2 img').each(function() {
            $(this).fadeOut(200,function() {
                $(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png');
                $(this).fadeIn(200);
            });
        });

http://jsfiddle.net/tq9nV/1/

于 2012-10-25T13:22:06.487 回答
0

将 jQuery 与animate(). 您还可以show(N ms)在其中一个图像和hide(N ms)另一个图像上运行。您还可以选择如何使用效果（如淡入和淡出）显示/隐藏图像。

另外，看看http://api.jquery.com/fadeIn/和http://api.jquery.com/fadeOut/

于 2012-10-25T12:59:36.163 回答