美文网首页
11.23图片轮播

11.23图片轮播

作者: overisover | 来源:发表于2016-11-23 19:12 被阅读0次

声明提前

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

开关

图片的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>

相关文章

  • 11.23图片轮播

    声明提前 声明提前会把变量声明提前,但是不会把赋值提前, 开关 图片的src不能作为判断条件;2种状态的切换,可以...

  • 个人博客—轮播器

    个人博客—轮播器 轮播器自动轮播,每张图片淡入淡出 控制按钮和图片描述跟随图片轮播 鼠标悬停图片上方则停止轮播,滑...

  • 沉浸式渐变图片轮播器

    沉浸式渐变图片轮播器 沉浸式渐变图片轮播器

  • JQ实现左右轮播效果

    这篇文章主要是实现图片左右轮播效果,功能:进入页面自动播放图片,鼠标悬浮,暂停图片轮播,鼠标离开,继续图片轮播,点...

  • 常用三方 SDCycleScrollView轮播图

    iOS图片、文字轮播器Git/SDCycleScrollView 滚动轮播图片、文字、可使用本地图片或加载网络图片...

  • 用动画做图片轮播

    图片轮播的新方法,用动画实现轮播: 1.将需要轮播的图片用标签放在同一位置; 2.通过改变各个图片的透明度实现轮播...

  • 第三方库之 banner

    Android 广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加...

  • 27.jquery 实战-轮播

    代码 1.实现如下轮播效果 要求:渐变轮播,图片淡入淡出轮播会自动循环像左向右点击会展示前/后图片底部显示轮播当前...

  • 无限图片轮播器 --- Objective-C

    KNBannerView 无限循环轮播器:本地图片,网络图片(图片缓存) 一.功能描述及要点 1.无限图片轮播器,...

  • 轮播

    轮播的原理 滑动轮播1.轮播的图片水平排列2.给出一个与图片相同大小的视窗包裹图片列,设置overflow: hi...

网友评论

      本文标题:11.23图片轮播

      本文链接:https://www.haomeiwen.com/subject/qdnmpttx.html