欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现图片切换效果

程序员文章站 2022-07-03 19:30:47
本文实例为大家分享了javascript实现图片切换效果,自定义属性的应用  供大家参考,具体内容如下 ...

本文实例为大家分享了javascript实现图片切换效果,自定义属性的应用  供大家参考,具体内容如下

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片切换实例</title>
    <style>
      body{
        background-color: #a9a9a9;
        margin:0px;
      }
      ul{
        padding: 0;
        margin: 0;
      }
      li{ 
        list-style: none;
      }
      #pic{
        width:670px;
        height: 420px;
        position:relative;
        margin: 0 auto;/*整个div放到页面中间的位置*/
        background:url(img/loading.png) no-repeat center;
        background-color:#fff;

      }
      #pic img{
        width:670px;
        height: 420px;
      }
      #pic ul{
        position: absolute;
        top: 0px;
        right: -50px;
      }
      #pic li{
        width:40px;
        height:40px;
        margin-bottom: 4px;
        background:#666;
      }
      #pic .active{
        background: cadetblue;
      }
      #pic span{
        top:0px;


      }
      #pic p{
        bottom:0px;
        margin:0;

      }
      #pic p,#pic span{
        width: 670px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position:absolute;
        left:0px;
        color:#fff;
        background-color:#333;

      }
    </style>
    <script>


      window.onload = function(){
        var odiv = document.getelementbyid("pic");
        var oimg = document.getelementsbytagname("img")[0];//有tag标签的地方就得有数组[0],否则不提示错误,但却会加载不出来需要的内容。
        var op = document.getelementsbytagname("p")[0];
        var onum = document.getelementsbytagname("span")[0]; 
        var oul = document.getelementsbytagname("ul")[0];
        var ali = oul.getelementsbytagname("li");//通过父标签找到的子标签,这里不能加数组[0]

        var arrurl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
        var arrtext = ["中原工学院图书馆","中工宿舍楼","玫瑰花","小猫咪","绿色盆栽"];

        for(var i=0;i<arrurl.length;i++){
          oul.innerhtml += "<li></li>";//添加用“+=”,该写用“=”
        }
        //初始化
        //有数组的地方,大部分都有一个数字在静静的等待.数组配合数字以便找到需要的内容。
        var num = 0;
        oimg.src = arrurl[num];
        op.innerhtml = arrtext[num];
        onum.innerhtml = 1+num+'/'+arrurl.length;
        //在ul中添加li,根据数组的长度,为ul添加li的数量
        ali[num].classname = "active";//为标签添加class属性,需要用到classname

        for(i=0;i<ali.length;i++){
          ali[i].index = i;//索引值,需要添加对应关系,就要想到添加索引值
                  //定义的有数组,就不能忘记加[0]
          ali[i].onclick = function(){
            //点击按钮,找到与之对应的图片
            oimg.src = arrurl[this.index];
            op.innerhtml = arrtext[this.index];
            onum.innerhtml = 1+this.index+'/'+arrurl.length;
            //添加对应的点击时,li的图标发生变化,两种思路
            //思路1:清空当前所有active样式,为当前添加此class属性(扩展性好,但是运行速度可能不好)
            for(var i=0; i<ali.length; i++){
              ali[i].classname = "";
            }
            this.classname = "active";
            //思路2:清空前一个点击li的样式,为当前添加class属性(定点清除)
          }

        }


    }    
    </script>
  </head>
  <body>
    <div id="pic" >

      <img src=""/>
      <span>数量正在加载中......</span>
      <p>文字说明正在加载中......</p>
      <ul>

      </ul>
    </div>
  </body>
</html>

javascript代码片段可以简化成如下:

<script>


      window.onload = function(){
        var odiv = document.getelementbyid("pic");
        var oimg = document.getelementsbytagname("img")[0];
        var op = document.getelementsbytagname("p")[0];
        var onum = document.getelementsbytagname("span")[0]; 
        var oul = document.getelementsbytagname("ul")[0];
        var ali = oul.getelementsbytagname("li");
        var arrurl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
        var arrtext = ["中原工学院图书馆","中工宿舍楼","玫瑰花","小猫咪","绿色盆栽"];
        for(var i=0;i<arrurl.length;i++){
          oul.innerhtml += "<li></li>";
        }
        //初始化
        var num = 0;
        function fntab(){
          oimg.src = arrurl[num];
          op.innerhtml = arrtext[num];
          onum.innerhtml = 1+num+'/'+arrurl.length;
          ali[num].classname = "";
        }
        fntab();

        for(i=0;i<ali.length;i++){
          ali[i].index = i;
          ali[i].onclick = function(){
            num = this.index;
            fntab();
            }
            ali[num].classname = "active";
          }

        }


    }    
</script>

效果图:

JavaScript实现图片切换效果

不会做动图!明天再试试!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。