js轮播图(点击,自动,悬停，悬停加轮播)

您所在的位置：网站首页 › js图片自动轮播代码 › js轮播图(点击,自动,悬停，悬停加轮播)

js轮播图(点击,自动,悬停，悬停加轮播)

2023-11-27 23:10| 来源: 网络整理| 查看: 265

1.JavaScript中的轮播图

一：点击方式：

步骤：

1）获取所有img对象； 2）遍历这些对象的同时设置自定义属性index，以及给每个对象添加点击事件； 3）在点击事件方法中，通过当前对象求出index，把index当作imgs[ ] 的下标，求出src； 4）设置背景；

//获取所有img对象 var lis = document.getElementsByTagName("img"); //遍历对象们，分别设置点击事件 for(var i=0;i console.log(this.src); //console.log(i) //单机哪张图片就换哪张做背景 document.body.style.background="url("+this.src+")" } }

二：自动轮播方式：步骤： 1）获取所有img对象； 2）设置自增变量index=0； 3）遍历这些img对象，分别设置自定义属性； 4）设置定时器，每隔1秒回调一次方法，同时令index自增；如果index=图片的数量，则令index为0，否则根据index设置背景（imgs[index].src）;

//设置自动轮播 /* * 一：通过"."的方式设置自定义属性 */ //获取所有图片对象，并设置自定义属性index var imgs = document.querySelectorAll("img"); var index = 0; for(var i=0;i if(index==imgs.length) index = 0; //轮播到哪张图是根据自增变量index来确定 document.body.style.background = "url("+imgs[index].src+")" index++; },1000);

三：悬停方式：步骤： 1）获取所有图片的对象； 2）遍历循环img对象，设置自定义属性index，以及添加悬停事件； 3）在每个img对象的悬停事件中，根据当前对象求出src，并设置为背景；

//获取所有图片对象，并添加自定义属性index var imgs = document.querySelectorAll("img");//返回一个数组 //给每个img对象添加index for(var i=0;i //将该图片设置为背景 //document.body.style.background="url("+this.src+")"; 通过“.”获取 //通过getAttribute()获取 document.body.style.background="url("+imgs[this.getAttribute("index")].src+")"; } }

四：悬停加轮播方式：

//设置鼠标悬停换肤 var index = 0; var j = 0; var imgs = document.getElementsByTagName("img"); //返回一个数组 for(var i = 0; i clearInterval(timer); // document.body.style.background = "url(" + imgs[this.getAttribute("index")].src + ")" j = this.index; } imgs[i].onmouseout = function() { index = j + 1; timer = setInterval(function() { if(index == imgs.length) { index = 0; } else { document.body.style.backgroundImage = 'url(' + imgs[index].src + ')'; index++; } }, 1000); } } //设置自动轮播 var timer = setInterval(function() { if(index == imgs.length) { index = 0; } else { document.body.style.backgroundImage = 'url(' + imgs[index].src + ')'; index++; } }, 1000);

【本文地址】

js轮播图(点击,自动,悬停，悬停加轮播)

js轮播图(点击,自动,悬停，悬停加轮播)

今日新闻

推荐新闻