js实现图片轮换

最新推荐文章于 2021-01-14 18:51:05 发布

vastskyjoe

最新推荐文章于 2021-01-14 18:51:05 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： url filter border function input

本文链接：https://blog.youkuaiyun.com/vastskyjoe/article/details/3715690

本文介绍了一种简单的图片轮播实现方式，通过JavaScript控制图片的自动切换，并保持了良好的用户体验。该方案适用于网页设计中需要展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type='text' id='picName'/>
    <img src="" id="turn" width="450" height='300' border='1' style="filter:revealTrans(duration=1)">
<script type="text/javascript">
var a_url=new Array(4);
var a_name=new Array(4);
//路径
a_url[0]='/image/2.bmp';
a_url[1]='/image/3.bmp';
a_url[2]='/image/4.bmp';
a_url[3]='/image/5.bmp';
//图片名
a_name[0]='1';
a_name[1]='2';
a_name[2]='3';
a_name[3]='4';

var total=4;//总页数
var current=1;//当前页数
var time=2000;//轮换时间间隔,单位毫秒
var pic_obj=document.getElementById("turn") ;//捕获轮换图片对象
var name_obj=document.getElementById("picName") ;//捕获轮换名对象

//初始化
  name_obj.value=a_name[current-1];
  pic_obj.src=a_url[current-1];
  setTimeout("change()",time);

function change()
{//图片循环
  if(current!=total)
  {
   current+=1;
  }
  else
  {
   current=1;
  }
  name_obj.value=a_name[current-1];
  pic_obj.src=a_url[current-1];
  setTimeout("change()",time);
}
</script>