Question

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

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

Answer 1

我看到我的原始代码已经成功了:) 因为没有人接受，我会尽我所能。我将再次就一般事项给你一些指示：

您的超链接标记（<a>）未公开。这肯定会产生验证错误。你可以训练你的html技能validating yourself regularly（听起来很脏吗？）
在.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')的来源设置为：{/ p>

$('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 个答案: