如何使用javascript / jquery动态更改图像？ [英] How to dynamically change an image using javascript/jquery?
本文介绍了如何使用javascript / jquery动态更改图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以，我有这个 http://jsfiddle.net/ithril/UjGhE/1/
请检查出来。
So,i have this http://jsfiddle.net/ithril/UjGhE/1/ Please check it out.
我正在尝试的是将主图像img标签的src动态更改为图像的相同src属性那是点击。简单地说，无论哪个图像被点击，它都会显示在更大的窗口中，该窗口中有一个id =main-photo。
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. In short whichever image is clicked,it is displayed in the bigger window which has an id="main-photo".
推荐答案
我看到我的原始代码已经使它远远:)
由于没有人已经接受，我会尽我所能。我会再次给你一些关于一般事物的指针：
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:
- 你的超链接标签（
< a>）未关闭。这肯定会产生验证错误。您可以训练您的HTML技能，定期验证自己（听起来很脏吗？） - 在您的
.slider-large-image li img {}中，margin：10px没有关闭！
.main-photo img {} position：relative：未关闭;' - Your hyperlink tags (
<a>) are unclosed. This will surely generate a validation error. You can train your html skills be validating yourself regularly (sounds dirty right?) - In
.main-photo img {}theposition:relative:is not closed with ;' - In your
.slider-large-image li img {},margin: 10pxwas not closed!
注意
- 您可以将此问题添加到原来的问题。我会很高兴地添加了这个功能：）
- 我再次更正了你的代码。
- 有没有坚实的理由在你的转盘中使用超链接清单？我删除了标签，因为它们使事情变得不必要了。您应该与上一个和下一个触发器一样。
- 我不会修复布局。你可以自己弄清楚：）
- Miley rock！
- 我添加了默认图像，所以当页面第一次加载时 - 不会有空的容器。
- 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.
现场演示
http://jsfiddle.net/hobobne/K439d/
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">‹</a><a href="#" id="f">›</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>
这篇关于如何使用javascript / jquery动态更改图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
