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
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python 移动光标位置的方法
2019/01/20 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
成教自我鉴定
2013/10/27 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
三年大学自我鉴定
2014/01/16 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
教师工作证明范本
2015/06/12 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫