如何使用javascript / jquery動態更改圖像？

Question

所以，我有這個http://jsfiddle.net/ithril/UjGhE/1/請檢查出來。

我在這里嘗試的是將主圖像img標簽的src動態更改為所單擊圖像的相同src屬性。 簡而言之，無論點擊哪個圖像，它都會顯示在一個id =“main-photo”的較大窗口中。

Answer 1

我看到我的原始代碼已經做到了這一點:)因為沒有人接受，我會盡我所能。 我將再次就一般事項給你一些指示：

您的超鏈接標簽（ <a> ）是未公開的。 這肯定會產生驗證錯誤。 你可以訓練你的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>

Answer 2

使用jQuery執行此操作非常簡單。 當用戶單擊<img>標記時，您將在回調函數內訪問this標記。 只需取$(this).attr('src')並將$('#main-photo')的源設置為它，如下所示：

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

-

它看起來像在你的代碼中，你正在使用.main-photo img ，它也應該有效。 我現在正在看它。

-

編輯后，在審核您的代碼后，您似乎有很多錯過</a>以及其他錯誤。 這是一個更新和工作版本（減去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>

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

Answer 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
});

Answer 5

您所要做的就是從鏈接中刪除href屬性。 單擊時，這會導致頁面重新加載。 但是，此屬性還負責將光標變為指針，因此您必須在CSS中手動分配一個： a { cursor: pointer }

現在單擊img將在主圖像持有者中加載所述圖像，而不會重新加載頁面，這會導致您的問題。

如果我是你，我會清理HTML，因為有很多未封閉的標簽。

如何使用javascript / jquery動態更改圖像？

問題描述

5 個解決方案

解決方案1
4 已采納 2011-08-08 00:41:52

解決方案2
1 2011-08-07 16:14:01

解決方案3
1 2011-08-07 16:32:34

解決方案4
1 2011-08-07 16:34:09

解決方案5
0 2011-08-07 16:23:58

如何使用javascript / jquery動態更改圖像？

問題描述

5 個解決方案

解決方案1 4 已采納 2011-08-08 00:41:52

解決方案2 1 2011-08-07 16:14:01

解決方案3 1 2011-08-07 16:32:34

解決方案4 1 2011-08-07 16:34:09

解決方案5 0 2011-08-07 16:23:58

解決方案1
4 已采納 2011-08-08 00:41:52

解決方案2
1 2011-08-07 16:14:01

解決方案3
1 2011-08-07 16:32:34

解決方案4
1 2011-08-07 16:34:09

解決方案5
0 2011-08-07 16:23:58