网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于javascript实现样式清新图片轮播特效
内容
    本文实例为大家分享了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="../images/textPhoto/1.jpg" height="500px" width="700px" onmouseover="over1()" onmouseout="out1()">
      </div>
      <div id="nav1">
       <table>
        <tr>
         <td id="text" bgcolor="#F0F0F0" colspan="15"><input type="text" id="_text" readonly></td>
         <td id="img1" bgcolor="#db7093" onmouseover="over2(1)" onmouseout="out2(1)">1</td>
         <td id="img2" bgcolor="#da70d6" onmouseover="over2(2)" onmouseout="out2(2)">2</td>
         <td id="img3" bgcolor="#9acd32" onmouseover="over2(3)" onmouseout="out2(3)">3</td>
         <td id="img4" bgcolor="#adff2f" onmouseover="over2(4)" onmouseout="out2(4)">4</td>
         <td id="img5" bgcolor="#00bfff" onmouseover="over2(5)" onmouseout="out2(5)">5</td>
        </tr>
       </table>
      </div>
     </div>
     <script type="text/javascript">
      //将轮换的大图片放入数组中
      var arr = new Array();
      arr[0] = "../images/textPhoto/1.jpg";
      arr[1] = "../images/textPhoto/2.jpg";
      arr[2] = "../images/textPhoto/3.jpg";
      arr[3] = "../images/textPhoto/4.jpg";
      arr[4] = "../images/textPhoto/5.jpg";
      //将input区域变换的文字放在数组里
      var text = new Array();
      text[0] = "焦点图1";
      text[1] = "焦点图2";
      text[2] = "焦点图3";
      text[3] = "焦点图4";
      text[4] = "焦点图5";
      var smallImg = document.getElementsByClassName("sImg"); //将页面上所有小图片存放在一个数组
      var num = 0;
      function changeImg() {
       document.getElementById("_photoes").src = arr[num];
       document.getElementById("_text").value = text[num];
       //当前小图标增加边框样式
       for(var i=0;i<arr.length;i++) {
        if(i==num) smallImg[num].style.border = "red solid"; //大图标对应的小图标增加边框样式
        else smallImg[i].style.border = "none";
       }
       if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片，则图片序号变为第一张的序号
       else num += 1; //图片序号加一
      }
      var setID = setInterval("changeImg()",1000); //这样写任然会不断调用changeImg()函数
      /*当鼠标滑到大图标上时*/
      function over1() {
       clearInterval(setID); //图片停止轮换
    //   smallImg[n-1].style.border = "red solid";
      }
      /*当鼠标离开大图标时*/
      function out1() {
       setID = setInterval("changeImg()",1000);  //图片继续轮换
    //   smallImg[n-1].style.border = "none"; //大图标对应的小图标边框样式取消
      }
      /*当鼠标滑到小图标上时*/
      function over2(n) {
       document.getElementById("_photoes").src = arr[n-1]; //只要鼠标滑到小图标上，大图区域就显示对应的图片
       document.getElementById("_text").value = text[n-1];
       clearInterval(setID); //图片停止轮换
       //当前小图标增加边框样式
       for(var i=0;i<arr.length;i++) {
        if(i==n-1) smallImg[n-1].style.border = "red solid";
        else smallImg[i].style.border = "none";
       }
      }
      /*当鼠标离开小图标时*/
      function out2(n) {
       if(n!=arr.length)
        num = n; //从当前图片开始轮换
       else num = 0;
       setID = setInterval("changeImg()",1000);  //图片继续轮换
    //   smallImg[n-1].style.border = "none"; //小图标边框样式取消
      }
     </script>
    </body>
    </html>
    三、多张图片轮换调试笔记
    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="../images/hao123/7.jpg" id="topPhoto">
    在使用的时候最好定义一下图片的样式，把图片的长宽都统一，这样图片动态显示的效果会更好一些。
    以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 9:36:46