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 子窗口操作父窗口的代码
Sep 21 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
详解JavaScript的变量
Apr 04 Javascript
js代码实现轮播图
May 04 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
办公室文员自荐书
2014/02/03 职场文书
网站创业计划书
2014/04/30 职场文书
自主招生推荐信范文
2014/05/10 职场文书
村道德模范事迹材料
2014/08/28 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL