⑴ 怎么样使用js制作点击图片下一张效果急求!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var myimg=new Array("a2","a3","a4");
var i=0
function next(obj)
{
obj.src=myimg[i]+".jpg";
i++;
}
</script>
</head><body>
<img src="a1.jpg" onclick="next(this)"/>
</body>
</html>
⑵ JS实现点击一个按钮更换图片
你的代码差在少了"选择元素"这一步。
img1.src = "..images/DT2.JPG"这一步是没有作用的,因为img1你还没有定义。
正确的方法是让图片元素的id是img1,然后
document.getElementById('img1').src = "..images/DT2.JPG"
这样进行赋值。
document.getElementById('img1')这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
<div class="DT">
<div>
<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
/>
</div>
</div>
<div style="text-align:center">
<input type="button" id="b1" value=" 放大 " onclick="fd();" />
<input type="button" id="b3" value="还原 " onclick="hy();" />
<input type="button" id="b2" value=" 缩小 " onclick="sx();" />
</div>
function fd() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg"
}
function sx() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg"
}
function hy() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
}
⑶ javascript 最后一张图片 点击下一张 就自动切换到下一页
把图片名字设置成一样的 名字+(1-10)的编号+".jpg" 放在当前目录
<table><tr><td>><label onclick="PriImg()">上一张</label></td>><td><img id="imgid" src="img1.jpg" width="200" height="200" /></td><td><label onclick="NextImg()">下一张</label></td></tr></table>
function NextImg(){
var img=document.getElementById(“imgid”);
var nowImg=1;
nowImg+=1;
if(nowImg<=10){
img.src=mowImg+".jpg";
}
}
function PriImg(){
var img=document.getElementById(“imgid”);
var nowImg=1;
nowImg+=1;
if(nowImg>=1){
img.src=mowImg+".jpg";
}
}
⑷ 如何用js实现点击图片切换另一图片,再次点击恢复
<script>
function change_pic(){
var imgObj = document.getElementById("caocao_pic");
var Flag=(imgObj.getAttribute("src",2)=="images/caocao.png")
imgObj.src=Flag?"images/diaochan.png":"images/caocao.png";
}
</script>
<img src="images/caocao.png" class="wujiang_pic_size" id="caocao_pic" onClick="change_pic()">
⑸ js点击切箭头到下一张图片
这个很简单,先给div设置超出部分隐藏,然后,点击事件中动态设置img的位置,负值。
⑹ 如何用js实现点击一张图片在旁边显示另一张图片,再点击一下,显示的
给按钮写一个空class,给图片预备一个class(fade)-display:none;绑定点击事件toggle该class,判断this是否有该class对图片进行toggle(fade);
⑺ js怎么实现点击图片左边跳转前一张点击右边跳转下一张
思路:可以使用css sprite方法,将一副图片分割成两半,然后拼接成一幅图片。
这样看起来是一幅,其实是两幅,给其定义不同的事件,基本上能达到你要求的结果。
⑻ 如何用javascript实现三张以上的图片在点击图片时切换到下一张,我是初学者,希望用数组和循环实现求代码
<script type="text/javascript">
window.onload = function() {
// 图片地址数组
var image_urls = ["first.jpg", "second.jpg", "third.jpg", "fourth.jpg"];
// 初始化数组键值 (0 = 第一个图片)
var idx = 0;
// 点击 id 为 img 的图片
document.getElementById("img").onclick = function() {
// idx + 1,如果为最后一张,还原回第一张
idx = idx === image_urls.length - 1 ? 0 : idx + 1;
// 设置 src
this.src = image_urls[idx];
// 测试
alert(this.src);
};
};
</script>
<img id="img" src="first.jpg" />
上面代码只用了一个 img,点击更换地址。
还是你想全部隐藏(除当前图片),点击后显示下一张?
⑼ 3张图片,javascript实现点击图片更换下一张
js代码:
function changeImg(num){
var img = document.getElementById('img_box').getElementsByTagName('img');
for(i=0;i<=img.length;i++){
if(i==num+1) img[i].style.display="inline";
else img[i].style.display="none";
if(num==3) img[0].style.display="inline"; //这里的数字3需要与下面html中的最后一个保持一致
}
}
html代码:
<div id="img_box">
<img src="1.jpg" onclick="changeImg(0)" style="display:inline;"/>
<img src="2.jpg" onclick="changeImg(1)" style="display:none;" />
<img src="3.jpg" onclick="changeImg(2)" style="display:none;" />
<img src="4.jpg" onclick="changeImg(3)" style="display:none;" />
</div>
⑽ 3张图片,javascript实现点击图片更换下一张,能执行但是chrome报错,如何完善
你的for循环的<=改成<就好了,不过建议换成这样
<div id="img_box">
<img src="" style="display:inline;"/>
<img src="" style="display:none;" />
<img src="" style="display:none;" />
<img src="" style="display:none;" />
</div>
document.querySelector("#img_box").onclick=(e)=>{
e.target.style.display="none"
if (e.target.nextElementSibling) {
e.target.nextElementSibling.style.display="inline"
}else{
document.querySelector("#img_box img").style.display="inline"
}
}