如何使用 javascript 访问和修改 HTML 页面中的图像
How do I access and modify an image in an HTML page using javascript?
我的HTML页面有一个id为img的图像。这个想法是,通过单击第一个、上一个或下一个,用户可以浏览一组图像。如何使用 JavaScript 执行此操作?
这对你来说应该是一个好的开始:
<script>
var imgs = ["img1.png","img2.png","img3.png"]; // copy images to the same dir
var index = 0;
</script>
<img src="img1.png" onclick="this.src=imgs[++index%imgs.length]"/>
单击要滑动的图像。
如果需要按钮,请参阅以下示例:
<img id="clicker" src="img1.png"/>
<a href="#" onclick="prev(); return false;">Prev</a>
<a href="#" onclick="next(); return false;">Next</a>
<a href="#" onclick="first(); return false;">First</a>
<a href="#" onclick="last(); return false;">Last</a>
<script>
var imgs = ["img1.png","img2.png","img3.png"];
var index = 0;
var clicker = document.getElementById("clicker");
function prev() { clicker.src = imgs[--index%imgs.length]; }
function next() { clicker.src = imgs[++index%imgs.length]; }
function first() { clicker.src = imgs[index=0]; }
function last() { clicker.src = imgs[index=imgs.length-1]; }
</script>
return false
表示单击时的默认操作(点击链接)被禁止。Javascript可以访问元素,即使用id
(见clicker
这里)。一旦你适应了这一点并开始解决浏览器兼容性问题,最好继续使用jQuery(正如另一个建议的那样),MooTools或其他框架。
使用 jQuery!
var myImg = $("#myimg");
$("#next").click(function(){
var id = myImg.attr("data-id") + 1;
myImg.attr("src", "image"+id+".jpg");
});
$("#prev").click(function(){
var id = myImg.attr("data-id") -1;
myImg.attr("src", "image"+id+".jpg");
});
.HTML:
<img id="myimg" src="image1.jpg" data-id="1">
<a href="#" id="next">Next</a><br>
<a href="#" id="prev">Previous</a><br>
这是一个非常愚蠢的例子。那里有许多幻灯片插件!
不需要 jQuery:
<script type='text/javascript'>
window.onload = function() {
var imageSrcs= ['1.jpeg', '2.jpg', '3.jpg'];
var index = 0;
var image = document.getElementById('img');
var previous = document.getElementById('previous');
previous.onclick = function() {
index -= 1;
if(index < 0) index = imageSrcs.length - 1;
image.src = imageSrcs[index];
}
var next = document.getElementById('next');
next.onclick = function() {
index += 1;
if(index == imageSrcs.length) index = 0;
image.src = imageSrcs[index];
}
}
</script>
和 html:
<img src='1.jpeg' id='img'>
<div>
<span id='previous'>Previous</span>
<span id='next'>Next</span>
</div>
你不需要
一个库。像这样的事情会改变图像网址,其中"theImg"是图像的id
:
document.getElementById("theImg").src = "newUrl.png";
要在没有显式 id
s 的情况下执行此操作,这将更改 url,其中 i
是图像的索引:
document.getElementsByTagName("img")[i].src = "newUrl.png";
尝试这样的事情(未经测试):
加载 JQUERY:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
JAVASCRIPT:
<script type='text/javascript'>
var lst_src = ['img1.jpg', 'img2.png', 'img3.gif'];
$('a', '#nav').click(function(e) {
e.preventDefault();
var src_current = $('#img').attr('src');
var index = lst_src.indexOf(src_current);
var len = lst_src.length;
var action = $(this).attr('class');
switch ($action) {
case 'previous' : var i = index - 1;
if (i < 0) src_current = lst_src[len + i];
else src_current = lst_src[i];
break;
case 'next' : var i = index + 1;
if (i > len) src_current = lst_src[i - len];
else src_current = lst_src[i];
break;
case 'first' : src_current = lst_src[0];
break;
case 'last' : src_current = lst_src[len - 1];
break;
}
$('#img').attr('src', src_current);
});
</script>
HTML:使用链接的类来表示所需的操作:
<img id='img' src='img1.jpg'>
<p id='nav'>
<a href='' class='first'>←←First</a>
<a href='' class='previous'>←Previous</a>
<a href='' class='next'>Next→</a>
<a href='' class='last'>Last→$rarr;</a>
</p>
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Html页面上的多个Base64图像和平滑加载
- 使用 js 将背景图像设置为 HTML
- 将HTML表格导出到带有文本和图像的excel中
- 将包含SVG元素的HTML转换为图像文件
- 如何在另一个html文件的框架中包含图像
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- 如何在html表中插入多个相同的图像
- 如何使某个框等于图像HTML的位置
- 多个复选框,如果正确,则更改背景图像(HTML/Javascript)
- 单击以将所有图像 HTML 标记插入到文本区域
- 滚动时从数据库获取图像 (HTML)
- 在图像 html 旁边键入文本
- 替换并连接图像 HTML 字符串
- 返回到索引.html从图像.html通过使用PhoneGap Android中的“手机后退”按钮
- 删除或隐藏上一帧中的图像-html 5画布
- 更改多个图像/元素悬停在覆盖的图像HTML
- 使用Dial控件动画图像(HTML/JavaScript/…)
- Mailgun:发送图像(HTML)和文本从Parse只显示HTML
- 使用servlet为html页面提供图像+html内容的最佳方式