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 写的个性导航菜单
Dec 24 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
js完整倒计时代码分享
Sep 18 Javascript
js实现下拉菜单效果
Mar 01 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
javascript操作元素的常见方法小结
Nov 13 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP常用数组函数介绍
2014/07/28 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
js自定义事件代码说明
2011/01/31 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python常用知识梳理(必看篇)
2017/03/23 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
高中课前三分钟演讲稿
2014/08/18 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
网吧员工管理制度
2015/08/05 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Go语言读取txt文档的操作方法
2022/01/22 Golang
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技