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

Question

So,i have this http://jsfiddle.net/ithril/UjGhE/1/ Please check it out. 所以，我有这个http://jsfiddle.net/ithril/UjGhE/1/请检查出来。

What i'm trying here is to change the main image img tag's src dynamically to the same src attribute of the image that is clicked. 我在这里尝试的是将主图像img标签的src动态更改为所单击图像的相同src属性。 In short whichever image is clicked,it is displayed in the bigger window which has an id="main-photo". 简而言之，无论点击哪个图像，它都会显示在一个id =“main-photo”的较大窗口中。

Answer 1

I see my original code has made it this far :) Because nobody has gotten accept, I will try my best. 我看到我的原始代码已经做到了这一点:)因为没有人接受，我会尽我所能。 I will again give you some pointers on general matter: 我将再次就一般事项给你一些指示：

Your hyperlink tags ( <a> ) are unclosed. 您的超链接标签（ <a> ）是未公开的。 This will surely generate a validation error. 这肯定会产生验证错误。 You can train your html skills be validating yourself regularly (sounds dirty right?) 你可以训练你的html技能定期验证自己（听起来很脏吗？）
In .main-photo img {} the position:relative: is not closed with ;' 在.main-photo img {} position:relative:未关闭;'
In your .slider-large-image li img {} , margin: 10px was not closed! 在.slider-large-image li img {} ， margin: 10px未关闭！

NOTES 笔记

You could have added this question to your original one. 您可以将此问题添加到原始问题中。 I would have happily added this feature :) 我很乐意添加这个功能:)
I again corrected your code a little. 我再次纠正了你的代码。
Is there a solid reason for using hyperlinks in your carousel list? 是否有充分的理由在您的轮播列表中使用超链接？ I removed the tags, since they made things unnecessarily complicated. 我删除了标签，因为它们使事情变得不必要地复杂化。 You should do the same with the previous and next triggers. 您应该对上一个和下一个触发器执行相同的操作。
I'm not going to fix the layouting. 我不会修复布局。 You can figure it yourself out :) 你可以自己搞清楚:)
Miley rocks! 麦莉岩石！
I added default image, so when the page is loaded for the first time -- there wouldn't be a empty container. 我添加了默认图像，所以当第一次加载页面时 - 不会有空容器。

Live demo 现场演示

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

Full version code: 完整版代码：

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

It's really simple to do this using jQuery. 使用jQuery执行此操作非常简单。 When the user clicks on an <img> tag, you'll have access to this inside the callback function. 当用户单击<img>标记时，您将在回调函数内访问this标记。 Simply take $(this).attr('src') and set the source of $('#main-photo') to it like so: 只需取$(this).attr('src')并将$('#main-photo')的源设置为它，如下所示：

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

- -

It looks like in your code, you're using .main-photo img , which should also work. 它看起来像在你的代码中，你正在使用.main-photo img ，它也应该有效。 I'm looking at it more now. 我现在正在看它。

- -

EDIT, after reviewing your code, you seem to have many missing </a> s along with other errors. 编辑后，在审核您的代码后，您似乎有很多错过</a>以及其他错误。 Here is an updated and working version (minus the CSS and extra javascript): 这是一个更新和工作版本（减去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

Change this part of your JS code: 更改JS代码的这一部分：

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

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

    });

to: 至：

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

It should work fine. 它应该工作正常。 Eg: http://jsfiddle.net/UjGhE/23/ 例如： 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

All you have to do is remove the href attribute from your links. 您所要做的就是从链接中删除href属性。 When clicked, this causes the page to reload. 单击时，这会导致页面重新加载。 However, this attribute is also responsible for the cursor to turn into a pointer, so you'll have to manually assign one in CSS: a { cursor: pointer } 但是，此属性还负责将光标变为指针，因此您必须在CSS中手动分配一个： a { cursor: pointer }

Clicking on the img's now would load said image in your main image holder, without the page reloading, which caused your problem. 现在单击img将在主图像持有者中加载所述图像，而不会重新加载页面，这会导致您的问题。

I would clean up the html if i were you though, cause there are a lot of unclosed tags. 如果我是你，我会清理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