立即执行函数、轮播图

最新推荐文章于 2021-12-14 21:46:44 发布

weixin_33712881

最新推荐文章于 2021-12-14 21:46:44 发布

阅读量188

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015244967

版权

轮播图

1DOM一些题目详解

题目:

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

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

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

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

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

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

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

不用加函数名,在后面加.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.
}

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

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

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

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

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

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

尽量不要用$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)})`)
}

weixin_33712881

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
立即执行函数、轮播图

轮播图1DOM一些题目详解题目:前端教材都在互联网上.现在为了节省时间,要学js就在阮一峰javascript上面学js高程只适合当工具书,如果哪里不清楚,或者想深入,就去看js高程,比如面向对象想深入学习,就去看js高程.全局变量,window里面本身就有的不能用.比如parent,不然会覆盖1.1立即调用函数,使用...
复制链接

扫一扫