js中的图片指定切换效果的实现

用到的js中的知识：js中的for循环的熟练运用

js中的this属性：指的是调用当前 方法 （函数） 的那个对象

js中的自定义属性：js可以为任意的HTML元素添加任意个自定义的属性

js中的索引值属性：在js中当你想建立“匹配” “对应” 的关系时就需要用到索引值index

实现图片指定切换的代码一：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js的图片指定切换效果</title>
        <style>
            h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
            #pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
            #pic img{ height:350px; width:500px;}
            ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
            li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
            #pic .active{ background:yellow;}
            #pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
            p{ bottom:0;}
            span{ top:0;}
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('pic');
                var oImg = oDiv.getElementsByTagName('img')[0];
                var oSpan = oDiv.getElementsByTagName('span')[0];
                var oP = oDiv.getElementsByTagName('p')[0];
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');

                var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
                var arrText = ['眺望远方','在海边嬉戏','爱心世界','美丽花环'];
                var num = 0;

                for( var i=0;i<arrUrl.length;i++){
                    oUl.innerHTML += '<li></li>';
                } // 找到代码中的li

                //初始化
                oImg.src = arrUrl[num];
                oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
                oP.innerHTML = arrText[num];
                aLi[num].className = 'active'; // 运用className的方法将指定的li变为其它的颜色

                for( var i=0;i<aLi.length;i++){
                    aLi[i].index = i; // 定义了索引值
                    aLi[i].onclick = function(){
                        oImg.src = arrUrl[this.index];
                        oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
                        oP.innerHTML = arrText[this.index]; // htis与索引值属性的联合使用

                        for( var i=0;i<aLi.length;i++){

aLi[i].className = '';
                          }

                        this.className = 'active';
                    } // 此处为点击哪个li，哪个li就变为当前的li的方法之
                }
             }
        </script>
    </head>
    <body>
        <h1>js的图片指定切换效果</h1>
        <div id="pic">
            <img src="" alt="" />
            <span>数量正在计算中...</span>
            <p>文字正在加载中...</p>
            <ul></ul>
        </div>
    </body>
</html>
此代码中当点击哪个li，哪个li就为当前的li的方法的基本思路为：
清空所有li的class属性，给当前点击的那个li添加className属性。
此方法虽然暴力，但是却很实用。
实现图片指定切换的代码二：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js的图片指定切换效果</title>
        <style>
            h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
            #pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
            #pic img{ height:350px; width:500px;}
            ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
            li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
            #pic .active{ background:yellow;}
            #pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
            p{ bottom:0;}
            span{ top:0;}
        </style>
        <script>
             window.onload = function(){
                var oDiv = document.getElementById('pic');
                var oImg = oDiv.getElementsByTagName('img')[0];
                var oSpan = oDiv.getElementsByTagName('span')[0];
                var oP = oDiv.getElementsByTagName('p')[0];
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');
                var oldLi = null;// 定义了一个变量名

var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
                var arrText = ['眺望远方','在海边嬉戏','爱心世界','美丽花环'];
                var num = 0;
                for( var i=0;i<arrUrl.length;i++){
                    oUl.innerHTML += '<li></li>';
                } // 找到代码中的li
                oldLi = aLi[num];//将li的值存储在此变量中

//初始化
                
                oImg.src = arrUrl[num];
                oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
                oP.innerHTML = arrText[num];
               aLi[num].className = 'active'; // 运用className的方法将指定的li变为其它的颜色

for( var i=0;i<aLi.length;i++){
                    aLi[i].index = i;
                    aLi[i].onclick = function(){
                        oImg.src = arrUrl[this.index];
                        oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
                        oP.innerHTML = arrTextt[this.index]; // htis与索引值属性的联合使用
                       oldLi.className = '';
                       oldLi = this;// 将此时点击的值设为当前值的前一个值，方便下一次点击时进行改变
                       this.className = 'active';
                    } // 此处为点击哪个li，哪个li就变为当前的li的方法之
                }
             }
        </script>
    </head>
    <body>
        <h1>js的图片指定切换效果</h1>
        <div id="pic">
            <img src="" alt="" />
            <span>数量正在计算中...</span>
            <p>文字正在加载中...</p>
            <ul></ul>
        </div>
    </body>
</html>

此代码中当点击哪个li，哪个li就为当前的li的方法的基本思路为：
清空当前的前一个li的class属性，给当前点击的那个li添加className属性。
此方法虽然更为合理，但是实用起来却不如第一种简洁方便。
代码的简化处理：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js的图片指定切换效果</title>
        <style>
            h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
            #pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
            #pic img{ height:350px; width:500px;}
            ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
            li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
            #pic .active{ background:yellow;}
            #pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
            p{ bottom:0;}
            span{ top:0;}
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('pic');
                var oImg = oDiv.getElementsByTagName('img')[0];
                var oSpan = oDiv.getElementsByTagName('span')[0];
                var oP = oDiv.getElementsByTagName('p')[0];
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oDiv.getElementsByTagName('li');

                var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
                var arrText = ['眺望远方','在海边嬉戏','爱心世界','美丽花环'];
                var num = 0;

                for( var i=0;i<arrUrl.length;i++){
                    oUl.innerHTML += '<li></li>';
                }

                //初始化
                function fnTab(){
                    oImg.src = arrUrl[num];
                    oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
                    oP.innerHTML = arrText[num];
                    for( var i=0;i<aLi.length;i++){
                            aLi[i].className = '';
                    }
                    aLi[num].className = 'active';
                }// 将相似的代码转换成相同的代码，再将其定义为函数
                fnTab()// 定义函数之后，要将其调用，函数内部的代码才会执行

                for( var i=0;i<aLi.length;i++){
                    aLi[i].index = i;
                    aLi[i].onclick = function(){
                        num = this.index;
                        fnTab();// 每写一次此函数，都意味着函数内部的代码被调用了
                    }
                }
            }
        </script>
    </head>
    <body>
        <h1>js的图片指定切换效果</h1>
        <div id="pic">
            <img src="" alt="" />
            <span>数量正在计算中...</span>
            <p>文字正在加载中...</p>
            <ul></ul>
        </div>
    </body>
</html>
代码中遇见相同的或者相似的代码，应该用定义函数的方法，是相同的代码进行封装起来，使代码看起来更加简洁。
在使用函数时，要注意，定义完函数之后，一定要进行调用，否则函数自己是不会主动执行的。

js中的图片指定切换效果相关推荐

  1. html背景图平移显示一次,js实现单张图片平移切换效果

    由于个人不需要手动切换功能,因此把那部分的内容删了,主要是增加了无缝切换的效果. 原理也很简单,大概是一张图移动到左边以后,从底部移回最右,等待下一次循环. jquer实现图片切换 $(functio ...

  2. 通过js实现图片左右点击图片左右切换效果

                                                通过js实现图片左右点击图片左右切换效果 通过图片左右的点击实现图片的左右切换,其实先看一下代码吧() 这边HT ...

  3. [JS]图片自动切换效果（学习笔记）

    上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...

  4. 怎么在ppt上设置文字滑动的效果html,PPT 中如何设置图片滚动切换效果

    我们经常在工作中使用PPT办公软件,在网页上也经常看到一组图片水平滚动或者垂直滚动的效果,你知道PPT 中如何设置图片滚动切换效果吗?今天小编就教一下大家使用PPT 中如何设置图片滚动切换效果. 首先 ...

  5. Js+CSS淡入式效果图片幻灯切换效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 手机端图片滑动切换效果

    最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...

  7. 为网页中的图片添加水印的效果

    程序本来源于http://dev.csdn.net/develop/article/22/22096.shtm中lovered所写的程序,我把其中的一些我觉得不太好的加以了改进并且增加一些功能形成了该 ...

  8. css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...

    纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...

  9. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览    源码下载 实现的代码. html代码: <div class=&qu ...

最新文章

  1. OTA：目标检测中的最优传输分配
  2. 电脑安装python为什么不能用-python安装后不能运行怎么办
  3. C 引用和指针的区别
  4. hdu4845 状态压缩BFS
  5. Yongkil Kwon：EOS具有当今世界上最多中心化的协议 | 独家专访
  6. spring 源代码地址
  7. [转载]FPGA/CPLD重要设计思想及工程应用(时序及同步设计)
  8. python程序写诗_用Python作诗，生活仍有诗和远方
  9. 数据科学家数据分析师_使您的分析师和数据科学家在数据处理方面保持一致
  10. python：对list去重
  11. vue value key
  12. Nginx 安装与启动
  13. Cesium多屏展示
  14. 面向初学者的图形数据库：为什么我们需要NoSQL数据库，ACID与BASE的解释说明
  15. Node.js HTTP
  16. Oracle数据库学习笔记（十五）--自连接
  17. 淘宝电子面单怎么用CAINIAO打印组件调打印偏移
  18. 安全体系（三）——SHA1算法详解
  19. CMD命令查看WiFi密码
  20. 在windows service 2008上搭建虚拟专用网络

热门文章

  1. excel中隐藏列，隐藏行，增加列，取消隐藏，调节列宽
  2. 英国皇家海军即将举行“信息勇士17”网络作战演习
  3. android 秒拍开源,六月份21款优秀Android开源库整理推荐
  4. 学习Java-接收考试成绩和出勤次数，判断是否具有考试资格
  5. 微信小程序菜鸟学习（一）
  6. 《Google资深工程师深度讲解Go语言》学习笔记
  7. 一命二运三风水，四仁五德六读书，七友八娶九盘算。
  8. 拼多多新店能开直播吗？直播前需要注意什么？
  9. unity制作小游戏
  10. H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变