Question

我想通过点击拇指图像来更改我的背景图像..我有这些代码..加载页面工作正常..但是当我点击拇指图像时，我的背景不会改变。请帮忙我的页面加载中有这个代码。此代码在页面加载中加载图像：

$(function() {
                //the loading image
                var $loader     = $('#st_loading');
                //the ul element 
                var $list       = $('#st_nav');
                //the current image being shown
                var $currImage  = $('#st_main').children('img:first');

                //let's load the current image 
                //and just then display the navigation menu
                $('<img>').load(function(){
                    $loader.hide();
                    $currImage.fadeIn(3000);
                    //slide out the menu
                    setTimeout(function(){
                        $list.animate({'left':'0px'},500);
                    },
                    1000);
                }).attr('src',$currImage.attr('src'));

我想通过选择图片将背景更改为所选图像：

//clicking on a thumb, replaces the large image
                $list.find('.sc_menu a').bind('click',function(){
                    var $this = $(this);
                    $loader.show();
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img:first');
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',$this.attr('alt'));
                }).bind('mouseenter',function(){
                    $(this).stop().animate({'opacity':'1'});
                }).bind('mouseleave',function(){
                    $(this).stop().animate({'opacity':'0.7'});
                });

这是我的HTML代码：

<body>

        <div id="st_main" class="st_main">
            <img src="images/2.jpg" alt="" class="st_preview" style="display:none;"/>
            <a class="back" href="#"><< back to Codrops</a>
            <ul class="menu" id="menu">
                <li>
                    <a href="#">Brand 1</a>
                    <div class="sc_menu_wrapper">
                        <div class="sc_menu">
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/3.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/3.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
</body>

Answer 1

试试这个

 $('<img class="st_preview"/>').load(function(){
        var $newimg         = $(this);
        var $currImage      = $('#st_preview').children('img:first');
        $newimg.insertBefore($currImage);
        $loader.hide();
        $currImage.fadeOut(2000,function(){$(this).remove();});
    }).attr('src',$e_next.find('img').attr('alt'));
}

Answer 2

尝试将$('<img class="st_preview"/>').load更改为$('img.st_preview').load

第一个在内存中创建一个新的img dom对象并分配src，其中第二个找到现有的st_preview并更改其attr

如何通过在Jquery中选择图像来将背景更改为所选图像？

2 个答案: