11.23图片轮播

声明提前

声明提前会把变量声明提前,但是不会把赋值提前,

开关

图片的src不能作为判断条件;
2种状态的切换,可以通过定义开关来实现;

<img src="images/file.png" id="img"/>
    <script>
        var onoff=false;
        var img=document.getElementById('img');
        img.onclick=function(){
            if(onoff){
                img.src='images/file.png';
            }else{
                img.src='images/file_select.png';
            }
            onoff=!onoff;//每执行一次函数改变一次;
        }
    </script>

获取元素

ID:document.getElementById('');
tag:document.getElementsByTagName('');//获取的是数组;
class:document.getElementsByClassName('');//获取的是数组;

图片轮播

顺序切换/循环切换;
0,当事件发生时;
1,需要将路径、图片描述定义为数组;
2,定义变量切换路径or图片描述;
3,判断条件:顺序or循环;

js向html添加元素的性能;

js内部运行性能较高,所以向HTML添加内容,先内部定义变量,后将变量赋给HTML;

<script>
    var str='';
        for(var i=0;i<10000;i++){
            str+='<span>'+i+'</span>'
        }
        document.body.innerHTML=str;
    </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,312评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,856评论 25 709
  • 世上有两种东西最触动人心,一是老者蹉跎岁月后的慈眉,二是孩童未经世事前的纯粹。 世上有两种东西最让人泪目,一是对生...
    sS离群索居阅读 2,515评论 0 0
  • 清晨 我漫步在 附近的小树林 知了叫 蛙声鸣 小鸟踱步青石小径 它惊闻我的脚步声 扑愣一下 掠过树梢 桅子花...
    雪莉诗话阅读 3,134评论 12 13
  • 大V妈妈线下故事会&容桂妈妈俱乐部的托马斯大电影活动今天上午在中影100进行。早上一场突如其来的大雨让宝妈们的出行...
    喻青阅读 1,586评论 0 0