如何用javascript实现三张以上的图片在点击图片时切换到下一张,我是初学者,希望用数组和循环实现求代码

2024-05-16 14:17

1. 如何用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);    };};

上面代码只用了一个 img,点击更换地址。

还是你想全部隐藏(除当前图片),点击后显示下一张?

如何用javascript实现三张以上的图片在点击图片时切换到下一张,我是初学者,希望用数组和循环实现求代码

2. 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代码:






3. 用JS 怎么实现点击上一张图片,下一张图片的显示?

要么用ajax,要么把图片都绑出来,设为隐藏,然后js控制第几张图片显示,要么把图片都绑出来做个div遮罩层。建议1、找个实例,右键--查看源码拿下别人的js2、换个方式,上百度搜索thickbox实例个人觉得thickbox效果还不错。

用JS 怎么实现点击上一张图片,下一张图片的显示?

4. jquery或是js写一个 图片上一张、下一张的效果,只要上一张、下一张效果 不要自动轮播效果。不要插件

把图片名字设置成一样的 名字+(1-10)的编号+".jpg" 放在当前目录
>上一张>下一张
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";
}
}

5. 求救:用JQUERY实现“上一张图”“下一张图”“第一张图”“最后一张图”的效果

获取当前图片的索引 index,注意范围在 [0, 图片张数-1]。

上一张 -1,下一张 +1,第一张就0,最后一张 length -1。

求救:用JQUERY实现“上一张图”“下一张图”“第一张图”“最后一张图”的效果

6. 怎么样使用JS制作点击图片下一张效果?急求!!




无标题文档

var myimg=new Array("a2","a3","a4");
var i=0
function next(obj)
{
 obj.src=myimg[i]+".jpg";
 i++;
}




7. 在jsp页面实现上一张和下一张图片效果...需要具体代码...谢谢!!!

//图片的src写你的绝对路径就行,还有你自己看总共有多少图片,下面有标注自己改改,还有最重要的一点就是图片名一定要起的有规律.
 
	
	
	
 
 
 
	function change(param)
	{
		var src = document.getElementById("img").src;
		var str = src.split("/");
		var index = str[str.length-1].split(".")[0];
		var nextIndex = parseInt(index)+1;
		var previousIndex = parseInt(index)-1;
		
		var newStr = "";

		for(var i=0;i<str.length-1;i++)
		{
			newStr = newStr + str[i] + "/";
		}
		
		if(index == 1 && param == 1)
		{
			alert("没有图片了!");
			return;
		}
		if(index == 2 && param == 2)  //这儿的index写你总共多少图片
		{
			alert("没有图片了!");
			return;
		}

		if(param == 1)
		{
			document.getElementById("img").src = newStr + previousIndex + "." + str[str.length-1].split(".")[1];
		}
		else
		{
			document.getElementById("img").src = newStr + nextIndex + "." + str[str.length-1].split(".")[1];
		}
	}

 

在jsp页面实现上一张和下一张图片效果...需要具体代码...谢谢!!!

8. 怎么用jquery实现图片上一张下一张效果? 注:图片有自动切换功能

给你个思路哈
1,定义一个function 
2,点击的时候触发这个function,获取当前img名称
3,因为你的img名称都是有规律可循的,所以自己可拼接下一个的img名称
4,将拼接完成的img名称加上路径,替换现在显示的img路径即可
最新文章
热门文章
推荐阅读