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 相关文章推荐
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
javascript刷新父页面方法汇总详解
Oct 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php生成短网址示例
2014/05/05 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
JS实现普通轮播图特效
2020/01/01 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
在Python中使用SQLite的简单教程
2015/04/29 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
转党组织关系介绍信
2014/01/08 职场文书
大学生就业策划书范文
2014/04/04 职场文书
质量保证书格式
2015/02/27 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android