基于javascript实现样式清新图片轮播特效

(编辑：jimmy 日期: 2025/6/28 浏览：3 次 )

本文实例为大家分享了javascript实现图片轮播特效，供大家参考，具体内容如下

一、实现效果

如上图：

　　1、图片自动依次轮换，每轮换到一张图片，下面对应的小图标出现红色边框，并显示对应的图片名称

　　2、鼠标放到大图片上面的时，图片停止轮换，一直显示当前图片；鼠标移开后图片继续轮换

　　3、鼠标移到小图标上时，大图片区域会显示对应的大图；鼠标移开则从当前图片开始继续轮换

二、代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>带小图标的JS图片轮换</title>
 <style type="text/css">
  *{
   margin: 0px;
   padding: 0px;
  }
  #content{
   width: 700px;
   height: 538px;
   margin: 0px auto; /*使所有内容居中*/
   border: solid #F0F0F0;
  }

  /*定义下面小图标处样式*/
  #nav1 table{
   width: 100%;
   height: 35px;
   margin-top: -4px;
  }
  #nav1 td{
   width: 35px;
   height: 35px;
   text-align: center; /*文字居中*/
   color: #ffffff;
  }
  #text{

  }
  #_text{
   width: 100%;
   height: 100%;
   background-color: #F0F0F0;
   border: none;
   text-align: center;
   font-size: 18px;
   color: #000000;
   font-weight: bold;
  }
 </style>
</head>
<body onload="changeImg()">
 <div id="content">
  <div id="images">
   <img id="_photoes" src="/UploadFiles/2021-04-02/1.jpg">

三、多张图片轮换调试笔记
js源代码：




//实现几张图片的轮换
var num = 0;  //显示的图片序号，刚开始时是第一张图片
function changeImg1() {
  var arr = new Array();
  arr[0]="../images/hao123/7.jpg";
  arr[1]="../images/hao123/8.jpg";
  arr[2]="../images/hao123/9.jpg";
  var photo = document.getElementById("topPhoto");
  if (num == arr.length - 1) num = 0;  //如果显示的是最后一张图片，则图片序号变为第一张的序号
  else num += 1;  //图片序号加一
  photo.src = arr[num];
}
setInterval("changeImg1()",5000);  //每隔5000毫秒调用一次changImg1()函数 



HTML代码：
<img src="/UploadFiles/2021-04-02/7.jpg">

在使用的时候最好定义一下图片的样式，把图片的长宽都统一，这样图片动态显示的效果会更好一些。
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

上一篇：javascript实现数字倒计时特效
下一篇：网页中JS函数自动执行常用三种方法