立即执行函数、轮播图

头像
风彻
    阅读 12 分钟
    1

    轮播图

    1DOM一些题目详解

    题目:

    • 前端教材都在互联网上.
    • 现在为了节省时间,要学js就在阮一峰javascript上面学
    • js高程只适合当工具书,如果哪里不清楚,或者想深入,就去看js高程,比如面向对象想深入学习,就去看js高程.

    ChqM38.png

    全局变量,window里面本身就有的不能用.比如parent,不然会覆盖

    1.1立即调用函数,使用局部变量

    全局变量容易覆盖,所以要用局部变量,用局部变量的方法

    立即执行函数有什么用？
    只有一个作用：创建一个独立的作用域。

    这个作用域里面的变量，外面访问不到（即避免「变量污染」）。
    用途：封装功能不污染全局变量

    1.要写在一个函数里,然后再立即执行这个函数.

    ChqN40.png

    不用加函数名,在后面加.call或者直接用()
    但是这样写会直接报错,解决方法
    function(){}()可以立即执行且不报错的方法

    (function(){alert('我是匿名函数')} ()) // 用括号把整个表达式包起来
(function(){alert('我是匿名函数')}) () //用括号把函数包起来
//下面的都是执行这个表达式,而不管返回值是什么
!function(){alert('我是匿名函数')}() // 求反，我们不在意值是多少，只想通过语法检查。
+function(){alert('我是匿名函数')}()
-function(){alert('我是匿名函数')}()
~function(){alert('我是匿名函数')}()
void function(){alert('我是匿名函数')}()
new function(){alert('我是匿名函数')}()

    2.最新的方法:使用let
    在花括号里使用let,就可以相当于在花括号这个作用域声明了局部变量

    {
   let parent = document.querySelector('#self');//let声明的parent是局部变量,不会覆盖window.parent.
}

    ChqO8f.png
    打印出来的是window.parent,没有被覆盖,说明let没有出按个画括号的作用域
    ChLSbj.png

    ChL9Vs.png
    打印出来的是2
    关于let
    let是ES6才规定的.也就是说,直到2015年以前,如果想使用局部变量,必须得用方法一,即下面的方法,使用局部变量必须得放在函数里面,然后立即执行函数.
    ChLP5q.png

    「每日一题」什么是立即执行函数？有什么作用？---方应杭

    2前端指导思想1:内容样式行为分离

    ChOkTA.png

    说说对内容样式行为分离的理解:
    回答方法,反着回答.
    如果不这样会有什么坏处:

    1. 如果由html负责样式,会使html很复杂,很难分清标签的逻辑结构
    2. 如果用css标识内容,比如after,加上content,用户选不到,js取不到.
    3. 如果css负责逻辑,会很慢
    4. 重点,尽量不要用js控制样式
      ChOlwj.png

    尽量不要用$div.show(),$div.hide().因为jquery会乱改display

    尽量这样用:加一个语义化的class,例如$div.addClass('active')或者 $div.addClass('disabled') 然后用css去控制
    苹果风格的轮播
    科技感十足的轮播
    可能是最厉害的轮播组件
    仅使用 CSS 做的一个轮播

    3开始做轮播

    思路如何动?
    可以用marginLeft,可以用绝对定位相对定位,也可以用css3transform.css3transform性能最好,所以用css3transform.css3transform

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易版轮播</title>
    <style>
        .window{
            border: 10px solid blue;
            width: 300px;
            overflow: hidden;
        }
        .images{

            display: flex;
            align-items: flex-start;
            transition: transform 0.5s;
        }
        button{
         margin-right: 10px;
            border: 10px solid blue;
        }
    </style>

    <script src="../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
    <div class="images" id="images">
        <img src="http://img4.imgtn.bdimg.com/it/u=3944123185,471045439&fm=200&gp=0.jpg" alt="" width="300px" height="200px">
        <img src="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf2b263a19f2dcd100bba12bc1.jpg" alt="" width="300px" height="200px">
        <img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a90139fcf01017950a7b0308f5cf.jpg" alt="" width="300px" height="200px">
    </div>
</div>
<button id="btn1">111111</button>
<button id="btn2">21111</button>
<button id="btn3">31111</button>
</body>
<script>
    $('#btn1').on('click',function () {
        $('#images').css({
            transform:'translateX(0)'
        })
    })
    $('#btn2').on('click',function () {
        $('#images').css({
            transform:'translateX(-300px)'
        })
    })
    $('#btn3').on('click',function () {
        $('#images').css({
            transform:'translateX(-600px)'
        })
    })
</script>
</html>

    4升级版轮播

    升级版轮播演示

    升级轮播代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>升级轮播</title>
    <style>
        .window{
            border: 10px solid blue;
            width: 300px;
            overflow: hidden;
        }
        .images{

            display: flex;
            align-items: flex-start;
            transition: transform 0.5s;
        }
        button{
         margin-right: 10px;
            border: 10px solid blue;
        }
        .red{
            color: red;
        }
    </style>

    <script src="../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
    <div class="images" id="images">
        <img src="http://img4.imgtn.bdimg.com/it/u=3944123185,471045439&fm=200&gp=0.jpg" alt="" width="300px" height="200px">
        <img src="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf2b263a19f2dcd100bba12bc1.jpg" alt="" width="300px" height="200px">
        <img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a90139fcf01017950a7b0308f5cf.jpg" alt="" width="300px" height="200px">
        <img src="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf2b263a19f2dcd100bba12bc1.jpg" alt="" width="300px" height="200px">
        <img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a90139fcf01017950a7b0308f5cf.jpg" alt="" width="300px" height="200px">
    </div>
</div>
<span id="button">
   <span>第1张</span><span>第2张</span><span>第3张</span><span>第4张</span><span>第5张</span>
<ul>
    <li></li>
    </ul>
</span>
</body>
<script>
    console.dir($('li'));
    var $allButtons = $('#button>span');//
    for (let i = 0; i < $allButtons.length; i++) {
        $($allButtons[i]).on('click',function (x) {//注意,allButtons[i]是dom对象,不是jquery对象,所以要用jquery的方法,就要在前面加上$,把他转化一下,里面就有方法了.
            var btnindex = $(x.currentTarget).index();//x.currentTarget就是当前点的对象.想要获取他在自己把把中的次序,用jquery中的index()比较简单
            var p = btnindex *(-300);
            $('#images').css({
                transform:'translateX('+p+'px)'
            })
            $allButtons.eq(btnindex).addClass('red')
                .siblings('.red').removeClass('red');//siblings()接受的是选择器,返回所有符合选择器的兄弟
            //jquery的链式操作.每次找到一个对象,下面的函数都是操作的这个新找到的对象
            //整个链式操作翻译:首先找到对应的第几个dom,然后用eq把他封装成jquery对象,,再用trigger('xxx')触发他的点击事件,在给他加上red的class,然后找到他符合 .red 的兄弟姐妹,然后在操作这些个兄弟姐妹
            n = btnindex;//这一步很关键,吧index赋给n,然后n就变成了当前点击的按钮的标号,其余的n都变了,也会从这里继续往下自动滚动,所以要用全局的.
        })
    }
    var n = 0;
    var size = $allButtons.length;
    $allButtons.eq(n%size)// eq找出对应第几个的dom,并把dom封装成jquery对象
        .trigger('click'); //trigger('xxx')触发一次xxxx事件
    var timerid = setInterval(function () {
        n++;
        $allButtons.eq(n%size).trigger('click')
    },3000)

    $('.window').on('mouseenter',function () {
        window.clearInterval(timerid);
    })
    $('.window').on('mouseleave',function () {
        timerid = setInterval(function () {//这里不能重新写var timer,不然就相当于重新在这里声明了新变量,上面的clean没办法清除这里了
            n++;
            $allButtons.eq(n%size).trigger('click')
        },3000)
    })
</script>
</html>

    5无缝轮播

    无缝轮播演示

    无缝轮播代码

    5.1无缝轮播思路探索1

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播</title>
    <link rel="stylesheet" href="./style.css">
    <script src="../../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
    <div class="images">
        <img src="./img/1.png" alt="图片1" width="400" height="300">
        <img src="./img/2.png" alt="图片2" width="400" height="300">
        <img src="./img/3.png" alt="图片3" width="400" height="300">
    </div>
</div>
<script src="./main.js"></script>
</body>
</html>
    *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.window{
    width: 400px;
    height: 300px;
    margin: 50px auto;
    overflow: hidden;
}
.images{
    position: relative;
}
.images>img{
    transition: transform 0.5s;
}
.images>img:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
}
.images>img:nth-child(2){
    position: absolute;
    top: 0;
    left: 100%;
}
.images>img:nth-child(3){
    position: absolute;
    top: 0;
    left: 100%;
}
.images>img.right{
    /*css优先级问题,必须要加.images>img才能覆盖上面的*/
    position: absolute;
    top: 0;
    left: 100%;
}

    setTimeout(function () {
    $('.images>img:nth-child(1)').css({
        transform:'translateX(-100%)'
    }).one('transitionend',function (x) {//.one(),和on一样,监听事件,但是只监听一次,只监听最近一次,监听完后就把这个监听器干掉
        $(x.currentTarget).addClass('right').css({
            transform:'none'
        });
    });

    $('.images>img:nth-child(2)').css({
        transform:'translateX(-100%)'
    })
},3000);

setTimeout(function () {
    $('.images>img:nth-child(2)').css({
        transform:'translateX(-200%)'
    }).one('transitionend',function (x) {
        $(x.currentTarget).addClass('right').css({
            transform:'none'
        });
    });
    $('.images>img:nth-child(3)').css({
        transform:'translateX(-100%)'
    })
},6000);

setTimeout(function () {
    $('.images>img:nth-child(3)').css({
        transform:'translateX(-200%)'
    });
    $('.images>img:nth-child(1)').css({
        transform:'translateX(-100%)'
    });;

    $('.images>img:nth-child(3)').one('transitionend',function (x) {
            $(x.currentTarget).addClass('right').css({
                transform:'none'
            });
        });

},9000);

    下一步变成循环

    5.2 使用js操纵css状态思路分析

    将所有的状态放在css里面,然后让js去切状态.比如图片三个状态分别是当前状态,移出去的状态,在外面等候的状态

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播</title>
    <link rel="stylesheet" href="./style.css">
    <script src="../../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
    <div class="images">
        <img src="./img/1.png" alt="图片1" width="400" height="300" class="imgmid">
        <img src="./img/2.png" alt="图片2" width="400" height="300" class="imgright">
        <img src="./img/3.png" alt="图片3" width="400" height="300" class="imgright">
    </div>
</div>
<script src="./main.js"></script>
</body>
</html>
    *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.window{
    width: 400px;
    height: 300px;
    margin: 50px auto;
    overflow: hidden;
}
.images{
    position: relative;
}
.images>img{
    transition: transform 0.5s;
    position: absolute;
    top: 0;
}
.imgleft{
    transform: translateX(-100%);

}
.imgmid{
    transform: translateX(0);
    z-index: 1;
}
.imgright{
    transform: translateX(100%);
}


    setTimeout(()=>{
    $('.images>img:nth-child(1)').addClass('imgleft').removeClass('imgmid')
        .one('transitionend',(e)=>{
            $(e.currentTarget).addClass('imgright').removeClass('imgleft')
        });

    $('.images>img:nth-child(2)').addClass('imgmid').removeClass('imgright')
},1000)

setTimeout(()=>{
    $('.images>img:nth-child(2)').addClass('imgleft').removeClass('imgmid')
        .one('transitionend',(e)=>{
            $(e.currentTarget).addClass('imgright').removeClass('imgleft')
        });

    $('.images>img:nth-child(3)').addClass('imgmid').removeClass('imgright')
},2000)
setTimeout(()=>{
    $('.images>img:nth-child(3)').addClass('imgleft').removeClass('imgmid')
        .one('transitionend',(e)=>{
            $(e.currentTarget).addClass('imgright').removeClass('imgleft')
        });

    $('.images>img:nth-child(1)').addClass('imgmid').removeClass('imgright')
},3000)

    5.3 使用js操纵css状态改为循环

    修改js

    let n = 1;
setInterval(()=>{
    $(`.images>img:nth-child(${in123(n)})`).addClass('imgleft').removeClass('imgmid')
        .one('transitionend',(e)=>{
            $(e.currentTarget).addClass('imgright').removeClass('imgleft')
        });

    $(`.images>img:nth-child(${in123(n+1)})`).addClass('imgmid').removeClass('imgright');

    n+=1;
},1000);
function in123(n) {
    if(n>3){
        n%=3;
        if(n===0){
            n=3;
        }
    }
    return n;//n123
}

    5.4 只修改CSS状态,就可以实现从任何方向进入

    .imgleft{
    transform: translateX(100%);

}
.imgmid{
    transform: translateX(0);
    z-index: 1;
}
.imgright{
    transform: translateX(-100%);
}
/*从右向左*/
    .imgleft{
    transform: translateY(100%);

}
.imgmid{
    transform: translateY(0);
    z-index: 1;
}
.imgright{
    transform: translateY(-100%);
}
/*从上向下*/

    样式变,js不用变

    5.5 优化代码结构,状态机切换

    只存在三种状态,切换的时候加过渡,使用js在满足状态条件的时候切换状态

    优化代码结构

    let n;
初始化();
setInterval(()=>{
    makeImgLeft(getImgN(n))
        .one('transitionend',(e)=>{
            makeImgRight($(e.currentTarget));//当前元素
        });

    makeImgMid(getImgN(n+1));
    n+=1;
},1000);
function in123(n) {
    if(n>3){
        n%=3;
        if(n===0){
            n=3;//n123
        }
    }
    return n;
}

function 初始化() {
    n = 1;
    $(`.images>img:nth-child(${n})`).addClass('imgmid').siblings().addClass('imgright');//让第1个在中间,其余的在右边等待进入
}
function makeImgLeft($node) {//切换状态函数
    $node.addClass('imgleft').removeClass('imgmid imgright');
    return $node;
}
function makeImgRight($node) {
    $node.addClass('imgright').removeClass('imgmid imgleft');
    return $node;
}
function makeImgMid($node) {
    $node.addClass('imgmid').removeClass('imgright imgleft');
    return $node;
}
function getImgN(n){
    return $(`.images>img:nth-child(${in123(n)})`)
}
    javascript
    风彻
    1.5k 声望142 粉丝
    « 上一篇
    简化版自己实现jQuery、this、arguments、闭包、原型链
    下一篇 »
    DOM事件模型

    引用和评论

    推荐阅读
    头像
    用一个例子理解JS函数的底层处理机制

    风彻阅读 1.2k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新