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 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Vue动态组件实例解析
Aug 20 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
深入了解Python数据类型之列表
2016/06/24 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
迎新晚会策划方案
2014/06/13 职场文书
文秘自荐信
2014/06/28 职场文书
python入门之算法学习
2021/04/22 Python
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
R9700摩机记
2022/04/05 无线电