js图片自动切换效果

迷南。 2021-07-04 17:12 515阅读 0赞

自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用

代码如下:

<script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5]="6.jpg"; arr[6]="7.jpg"; setInterval(changeImg,timeInterval); function changeImg() { var obj=document.getElementById("obj"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src=arr[curIndex]; } </script>

<img id=obj src ="1.jpg" border =0 />

可以自己配置，自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）  
虽然很简单，但是很实用。

<!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 language="javascript"> setInterval(test,1000); var array=new Array(); var index=0; var array= new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg"); function test() { var myimg=document.getElementById("imgs"); if(index==array.length-1) { index=0; } else{ index++; } myimg.src=array[index]; } </script> 
     </head> 
     <body> 
      <img id="imgs" src="image/1.jpg" />  
     </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，515人围观）

还没有评论，来说两句吧...

相关阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 306 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 293 阅读

相关图片切换效果!

学了一段时间tween算法,也学习了一些好的代码,也写了一些例子,不过都是模仿的, 但这个绝对是原创, HOHO <style type="text/css"> .s

忘是亡心i/ 2022年08月06日 05:17/ 0 赞/ 222 阅读

相关原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

曾经终败给现在/ 2022年05月20日 10:26/ 0 赞/ 259 阅读

相关图片自动切换播放的一个效果（类似幻灯片播放）

首先，我们先来设置一个装自动切换播放图片的容器，给这个容器宽设为640px，高640px，并且让它上边距为100px，左右居中，再放入一张图片，设置图片不能重复，如果你还想让它

喜欢ヅ旅行/ 2022年04月23日 15:28/ 0 赞/ 294 阅读

相关 JavaScript 图片滑动切换效果

序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做

本是古典何须时尚/ 2022年04月14日 01:50/ 0 赞/ 315 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 349 阅读

相关 js鼠标滚轮滚动图片切换效果

效果体验网址：[http://keleyi.com/keleyi/phtml/image/12.htm][http_keleyi.com_keleyi_phtml_image_

谁践踏了优雅/ 2022年03月31日 03:20/ 0 赞/ 395 阅读

相关图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/T

ゝ一纸荒年。/ 2021年10月08日 05:30/ 0 赞/ 464 阅读

相关 js图片自动切换效果

自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用代码如下: <script language =javascr

迷南。/ 2021年07月04日 17:12/ 0 赞/ 516 阅读