如何使用 javascript/jquery 动态更改图像？答案

【问题标题】：How to dynamically change an image using javascript/jquery?如何使用 javascript/jquery 动态更改图像？
【发布时间】：2012-01-29 01:22:41
【问题描述】：

所以，我有这个http://jsfiddle.net/ithril/UjGhE/1/ 请检查一下。

我在这里尝试将主图像 img 标记的 src 动态更改为单击图像的相同 src 属性。简而言之，无论单击哪个图像，它都会显示在具有 id="main-photo" 的较大窗口中。

【问题讨论】：

检查您的“a”标签是否有 href="" 重新加载页面并且 img 标签是“a”标签的子标签。我的回答应该可以正常工作。

标签： javascript jquery image dynamic

【解决方案1】：

我看到我的原始代码已经做到了这一点 :) 因为没有人被接受，所以我会尽力而为。我将再次就一般问题给您一些指示：

您的超链接标签 (<a>) 未关闭。这肯定会产生验证错误。您可以通过 validating yourself regularly 训练您的 html 技能（听起来很脏吧？）
在.main-photo img {} 中，position:relative: 没有用 ;' 关闭
在您的.slider-large-image li img {}，margin: 10px 没有关闭！

注意事项

您可以将此问题添加到您原来的问题中。我很乐意添加此功能:)
我再次更正了您的代码。
在轮播列表中使用超链接是否有充分的理由？我删除了标签，因为它们使事情变得不必要地复杂。您应该对上一个和下一个触发器执行相同的操作。
我不会修复布局。你可以自己想办法:)
麦莉摇滚！
我添加了默认图片，所以当页面第一次加载时——不会有空容器。

现场演示

http://jsfiddle.net/hobobne/K439d/

完整版代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>How to dynamically change an image using javascript/jquery? - Kalle H. Väravas</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        html, body {margin: 0px; padding: 0px;}
                html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
                .cb {clear: both;}
                #wrapper {width: 400px; margin: 0px auto;}
                    .main-photo{width: 80%; height: 400px; position: relative; border: 1px solid #000000;}
                        .main-photo img {width:100%; height:100%; position:relative; top: 0; left: 0px;}
                    .main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
                    .window {width: 700px; height: 230px; overflow: hidden; position: relative;}
                        .slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
                            .slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
                                .slider-large-image li img {float: left; width: 200px; height: 150px; margin: 10px; cursor: pointer;}
                    .slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
                        .slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
                            .slider-pager a:hover,
                            .slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
                            .slider-pager a:hover {color: black;}
                            .slider-pager a.active {/* background-color and border-radius used to be here.. */}
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="main-photo">
            <img id="mainphoto" src="http://www.insanemom.net/wp-content/uploads/miley-cyrus-smoking-bong.jpg" />
        </div>
        <div class="main-slider">
            <div class="window">
                <ul class="slider-large-image">
                    <li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
                    <li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
                    <li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
                    <li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
                </ul>
            </div>
            <div class="slider-pager"><a href="#" id="b">&lsaquo;</a><a href="#" id="f">&rsaquo;</a></div>
        </div>
        <br class="cb" />
    </div>
    <script>
        $(document).ready(function() {
            var imagewidth = $('.slider-large-image li').outerWidth();
            var imagesum = $('.slider-large-image li img').size();
            var imagereelwidth = imagewidth * imagesum;
            $(".slider-large-image").css({'width' : imagereelwidth});
            $('.slider-large-image li:first').before($('.slider-large-image li:last'));
            $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
            rotatef = function (imagewidth) {
                var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
                $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
                    $('.slider-large-image li:last').after($('.slider-large-image li:first'));
                    $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
                });
            };
            rotateb = function (imagewidth) {
                var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;       
                $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){               
                    $('.slider-large-image li:first').before($('.slider-large-image li:last'));
                    $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
                });
            };
            $(".slider-pager a#b").click(function () {
                rotateb(imagewidth);
                return false;
            });
            $(".slider-pager a#f").click(function () {
                rotatef(imagewidth);
                return false;
            });
            $(".slider-large-image li img").click(function() {
                $(".main-photo img").attr("src", $(this).attr('src'));
            });
        });
    </script>
</body>
</html>

【讨论】：

【解决方案2】：

使用 jQuery 实现这一点非常简单。当用户点击<img> 标签时，您将可以在回调函数中访问this。只需将$(this).attr('src') 设置为$('#main-photo') 的来源，如下所示：

$('img').click(function(){
    $('#main-photo').attr('src', $(this).attr('src'));
});

-

看起来在您的代码中，您使用的是.main-photo img，它也应该可以工作。我现在正在研究它。

-

编辑，在查看您的代码后，您似乎缺少许多 </a>s 以及其他错误。这是一个更新的工作版本（减去 CSS 和额外的 javascript）：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slider-large-image a img').click(function() {
        $('img#mainphoto').attr('src, $(this).attr('src'));
    });
});
</script>
<div id="wrapper">
    <div class="main-photo"><img id="mainphoto" src="" /></div>
    <div class="main-slider">
        <div class="window">
            <ul class="slider-large-image">
                <li><a href=""><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></a></li>
                <li><a href=""><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></a></li>
                <li><a href=""><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></a></li>
                <li><a href=""><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></a></li>
            </ul>
        </div>
        <div class="slider-pager"><a href="#" id="b">&lsaquo;</a><a href="#" id="f">&rsaquo;</a></div>
    </div>
    <br class="cb" />
</div>

【讨论】：

还可以考虑在链接的 href 标记中使用 "#"，并在回调中添加 return false;。

【解决方案3】：

更改这部分 JS 代码：

$(".slider-large-image li a img").click(function() {

        $(".main-photo img").attr("src",$(this).attr('src'));

    });

到：

$(".slider-large-image li a").click(function() {        
   $(".main-photo img").attr("src",$(this).find("img").attr("src"));
   return false;
});

它应该可以正常工作。例如：http://jsfiddle.net/UjGhE/23/

【讨论】：

【解决方案4】：

$("ul.slider-large-image li a").click(function(e){
    e.preventDefault();      // prevent changing url
    $("#mainphoto").attr('src',$(this).children('a').attr('src')); //show clicked photo as main
});

【讨论】：

【解决方案5】：

您所要做的就是从您的链接中删除href 属性。单击时，这会导致页面重新加载。然而，这个属性也负责将光标变成一个指针，所以你必须在 CSS 中手动分配一个：a { cursor: pointer }

现在单击 img 会将所述图像加载到您的主图像持有者中，而无需重新加载页面，这会导致您的问题。

如果我是你，我会清理 html，因为有很多未闭合的标签。

【讨论】：