JavaScript实现图片切换效果


Posted in Javascript onAugust 12, 2017

本文实例为大家分享了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实现图片切换效果

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

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

Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
js获取域名的方法
Jan 27 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 #Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
详解Node中导入模块require和import的区别
Aug 11 #Javascript
vue实现单选和多选功能
Aug 11 #Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP时间函数使用详解
2019/03/21 PHP
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python中对列表排序实例
2015/01/04 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
商业房地产广告语
2014/03/13 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android