![](/img/trans.png)
[英]How can I modify the content of an HTML page after redirecting from a form using only JavaScript/HTML?
[英]How do I access and modify an image in an HTML page using javascript?
我的HTML頁面上有一個ID為img的圖像。 這個想法是,通過單擊“上一個”,“上一個”或“下一個”,用戶可以瀏覽一組圖像。 如何使用JavaScript執行此操作?
使用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>
這是一個非常虛擬的例子。 那里有許多幻燈片插件!
這對您來說是一個好的開始:
<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:
<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>
你並不需要為這個圖書館。 這樣的事情會改變圖像的URL,其中“ theImg”是圖像的id
:
document.getElementById("theImg").src = "newUrl.png";
要在沒有顯式id
的情況下執行此操作,這將更改URL,其中i
是圖像的索引:
document.getElementsByTagName("img")[i].src = "newUrl.png";
嘗試以下操作(未經測試):
載入查詢:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.