TWEEN动画、JQUERY、ES6 — 2、轮播图-渐隐渐现版本

最新推荐文章于 2024-09-24 11:55:49 发布
最新推荐文章于 2024-09-24 11:55:49 发布
阅读量174 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：https://juejin.im/post/5bceb347e51d457a127ae7d9
版权

分析

目录

编译并压缩less（需要先npm安装less）

banner.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--development-->
    <!--<link rel="stylesheet/less" href="css/banner.less">
    <script src="js/less-2.5.3.min.js"></script>-->

    <!--production-->
    <link rel="stylesheet" href="css/banner.min.css">
</head>
<body>
<div class="container" id="container">
    <!--WRAPPER:控制轮播图切换的区域-->
    <ul class="wrapper">
        <!--<li class="slide">
            <img src="" data-img="img/banner1.jpg" alt="">
        </li>-->
    </ul>
    <!--FOCUS:控制焦点-->
    <ul class="focusBox clearfix">
        <!--<li class="select"></li>
        <li></li>
        <li></li>
        <li class="last"></li>-->
    </ul>
    <!--ARROW:控制切换的箭头-->
    <a href="javascript:;" class="arrow arrowLeft"></a>
    <a href="javascript:;" class="arrow arrowRight"></a>
</div>

<!--IMPORT JS-->
<script src="js/utils.min.js"></script>
<script src="js/animate.min.js"></script>
<script src="js/banner.js"></script>
</body>
</html>
复制代码

banner.less

@import "reset";

/*--BANNER--*/
.container {
  position: relative;
  margin: 20px auto;
  width: 1000px;
  height: 300px;
  overflow: hidden;
  text-align: center;

  .wrapper {
    position: relative;
    height: 300px;
    background: url("../img/default.gif") no-repeat center center #EEE;

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      //=>init style
      opacity: 0;
      filter: alpha(opacity=0);
      z-index: 0;

      img {
        display: none;
        width: 100%;
        height: 100%;
      }
    }
  }

  .focusBox {
    position: relative;
    top: -40px;
    z-index: 999;
    display: inline-block;
    padding: 4px 8px;
    height: 12px;
    background: rgba(0, 0, 0, .2);
    border-radius: 12px;

    li {
      float: left;
      margin-right: 10px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #FFF;
      cursor: pointer;

      &.last {
        margin-right: 0;
      }

      &.select {
        background: #DB192A;
      }
    }
  }

  .arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 999;
    margin-top: -30px;
    width: 30px;
    height: 60px;
    background: url("../img/pre.png") no-repeat;
    opacity: 0.3;
    filter: alpha(opacity=30);

    &:hover {
      opacity: 1;
      filter: alpha(opacity=100);
    }

    &.arrowLeft {
      left: 0;
      background-position: 0 0;
    }

    &.arrowRight {
      right: 0;
      background-position: -48px 0;
    }
  }
}
复制代码

reset.less

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td {
  margin: 0;
  padding: 0
}

body {
  font-size: 12px;
  font-style: normal;
  font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif
}

small {
  font-size: 12px
}

h1 {
  font-size: 18px
}

h2 {
  font-size: 16px
}

h3 {
  font-size: 14px
}

h4, h5, h6 {
  font-size: 100%
}

ul, ol {
  list-style: none
}

a {
  text-decoration: none;
  background-color: transparent
}

a:hover, a:active {
  outline-width: 0;
  text-decoration: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  border: 0;
  height: 1px
}

img {
  border-style: none
}

img:not([src]) {
  display: none
}

svg:not(:root) {
  overflow: hidden
}

html {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%
}

input, textarea, button, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}

audio, canvas, progress, video {
  display: inline-block
}

audio:not([controls]), video:not([controls]) {
  display: none;
  height: 0
}

progress {
  vertical-align: baseline
}

mark {
  background-color: #ff0;
  color: #000
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

button, input, select, textarea {
  font-size: 100%;
  outline: 0
}

button, input {
  overflow: visible
}

button, select {
  text-transform: none
}

textarea {
  overflow: auto
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

.clearfix:after {
  display: block;
  height: 0;
  content: "";
  clear: both
}
复制代码

banner.json

[
  {
    "id": 1,
    "img": "img/banner1.jpg",
    "desc": "海，你好",
    "link": "http://www.baidu.cn/"
  },
  {
    "id": 2,
    "img": "img/banner2.jpg",
    "desc": "梦想起飞",
    "link": "http://www.baidu.cn/"
  },
  {
    "id": 3,
    "img": "img/banner3.jpg",
    "desc": "把握未来，掌握先机",
    "link": "http://www.baidu.cn/"
  },
  {
    "id": 4,
    "img": "img/banner4.jpg",
    "desc": "好好学习",
    "link": "http://www.baidu.cn/"
  }
]
复制代码

banner.js

// var bannerRender = (function () {


//     return {
//         init: function () {

//         }
//     }
// })();

// bannerRender.init();





var bannerRender = (function () {
    var container = document.getElementById('container'),
        wrapper = utils.getElementsByClassName('wrapper', container)[0],
        focusBox = utils.getElementsByClassName('focusBox', container)[0],
        arrow = utils.children(container, 'a'),
        arrowLeft = arrow[0],
        arrowRight = arrow[1];
    var bannerData = null,
        wrapperList = null,
        focusList = null,
        wrapperImgList = null;

    //=>1、ajax获取数据
    function queryData() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'json/banner.json', false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                bannerData = utils.toJSON(xhr.responseText);
            }
        };
        xhr.send(null);
    }

    //=>2、绑定数据
    function bindData() {
        if (!bannerData) return;
        var str = ``,
            strFocus = ``;
        for (var i = 0; i < bannerData.length; i++) {
            var item = bannerData[i];
            str += `<li class="slide">
                <img src="" data-img="${item.img}" alt="">
            </li>`;

            strFocus += `<li class="${i === bannerData.length - 1 ? 'last' : ''}"></li>`;
        }
        wrapper.innerHTML = str;
        focusBox.innerHTML = strFocus;

        //=>5、数据绑定完需要获取所有的LI以及IMG，后面会用到
        wrapperList = wrapper.getElementsByTagName('li');
        focusList = focusBox.getElementsByTagName('li');
        wrapperImgList = wrapper.getElementsByTagName('img');
    }

    //=>6、设置默认展示
    function initDefault(index) {
        index = index || 0;
        utils.css(wrapperList[index], {
            opacity: 1,
            zIndex: 1
        });
        focusList[index].className += ' select';//=>一定是加等于(因为部分LI有自己的原有样式)
    }

    //=>8、图片延迟加载
    function computed() {
        if (!wrapperImgList) return;
        for (var i = 0; i < wrapperImgList.length; i++) {
            var curImg = wrapperImgList[i];
            if (curImg.isLoad) continue;
            lazyImg(curImg);
        }
    }

    function lazyImg(curImg) {
        curImg.isLoad = true;
        var tempImg = new Image;//创建一个临时
        tempImg.onload = function () {
            curImg.src = this.src;
            curImg.style.display = 'block';
            tempImg = null;
        };
        tempImg.src = curImg.getAttribute('data-img');
    }

    //=>10、实现轮播图的自动切换
    var step = 0,//->记录当前展示的是第几个SLIDE(索引)
        prevStep = 0,//->记录上一个展示的SLIDE索引
        autoInterval = 2000,//->自动切换的时间因子
        autoTimer = null,//->自动切换的定时器
        count = 0;//->总共的SLIDE数量

    
    function autoMove() {
        step++;
        if (step === count) {
            step = 0;
        }
        change();
    }

    //=>轮播图公共切换方法
    function change() {
        if (step === prevStep) return;
        var curSlide = wrapperList[step],
            preSlide = wrapperList[prevStep];

        //->当前展示的SLIDE层级变为1 & 上一个展示的SLIDE层级变为0
        utils.css(curSlide, 'zIndex', 1);
        utils.css(preSlide, 'zIndex', 0);

        //->让当前展示的SLIDE透明度从0~1(动画)
        animate({
            curEle: curSlide,
            target: {opacity: 1},
            duration: 200,
            callBack: function () {
                //=>上一个SLIDE隐藏(透明度为0)
                utils.css(preSlide, 'opacity', 0);
            }
        });

        //->当前展示的这一个SLIDE就是下一次切换的上一次SLIDE
        prevStep = step;

        //=>14、切换的时候要执行selectFocus让其焦点对齐
        selectFocus();
    }

    //=>13、焦点对齐的方法（这里用的是循环所有的焦点给当前索引加样式）；还有种方式：可以用清除上一个焦点样式给当前焦点加样式
    function selectFocus() {
        for (var i = 0; i < focusList.length; i++) {
            var item = focusList[i];
            if (i === focusList.length - 1) {//最后一个焦点有last做特殊处理
                item.className = i === step ? 'last select' : 'last';
                continue;
            }
            item.className = i === step ? 'select' : '';
        }
    }

    //=>15、鼠标划入划出BANNER区域控制自动切换的暂停和开始 用onmouseout和onmouseover有问题，后面会写
    function bindMouseEvent() {
        container.onmouseenter = function () {
            clearInterval(autoTimer);
            arrowLeft.style.display = arrowRight.style.display = 'block';//鼠标滑进来左右箭头显示
        };
        container.onmouseleave = function () {
            autoTimer = setInterval(autoMove, autoInterval);
            arrowLeft.style.display = arrowRight.style.display = 'none';//鼠标离开左右箭头隐藏
        };
    }

    //=>16、滑过焦点实现切换
    function bindFocus() {
        for (var i = 0; i < focusList.length; i++) {
            focusList[i].myIndex = i;
            focusList[i].onmouseenter = function () {
                step = this.myIndex;
                change();
            }
        }
    }

    //=>17、点击左右按钮切换
    function bindArrow() {
        arrowLeft.onclick = function () {
            step--;
            if (step < 0) {
                step = count - 1;
            }
            change();
        };
        arrowRight.onclick = autoMove;
    }

    return {
        init: function () {
            // 9、执行computed延迟加载
            // setTimeout(computed,500);//可以看延迟加载效果
            window.onload = computed;//=>当页面加载完成后做图片的延迟加载(放在上面也无所谓,因为事件绑定是异步编程:写在上面,也是需要等下面的代码都加载完成,页面才加载完成,才会触发LOAD事件)
            // 3、执行queryData()
            queryData();
            // 4、执行bindData()
            bindData();
            // 7、执行
            initDefault(step);

            //=>实现轮播图的切换
            count = bannerData.length;//11、获取总共的SLIDE数量
            autoTimer = setInterval(autoMove, autoInterval);//12、执行autoMove

            //=>18、其它切换方式
            bindMouseEvent();
            bindFocus();
            bindArrow();
        }
    }
})();
bannerRender.init();
复制代码

其余文件同之前封装的库（动画库animate和dom库utils）

weixin_34015336
关注
iTween.ValueTo实现tk2d的sprite渐隐效果
玄奘之家
04-15 5998
Tween.ValueTo(obj, iTween.Hash("from",1,"to",0,"time",3, "onupdate","OnUpdateTween", "onupdatetarget", this.gameObject));
demo--图片渐隐渐现轮播（jQuery）
DcTbnk的博客
06-13 295
因为背景图大小是760300 所以最外容器也设置为760300 自己写的样式 即css和老师写的不太一样 一.自己写的css、html和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.
cc.tween 动作系统详解
HYNN12的博客
10-22 9330
说明： 以下示例中的node节点，其类型是cc.Node。 一、单一动作 node节点的颜色在1秒内渐变成红色。想要改变什么属性，只需要在花括号内写入正确的属性名称，并设置值即可。 cc.tween(node) .to(1, {color: cc.color(255, 0, 0)}) .start(); 二、同步动作 相当于 cc.spawn ，同时执行多个动作。 cc.tween(node) .to(1, {position: cc.v2(70, 100), scale: 2}) .start();
Cocos Creator 实现节点淡入淡出渐显渐隐的两种方法和如何制作DIY动画实现自己想要的特殊动画效果
锕琅的博客
08-24 1万+
节点淡入淡出效果 对于实现淡入淡出效果，creator有已经实现的API var action = cc.fadeIn(1.0);//渐显 var action = cc.fadeOut(1.0);//渐隐效果 var action = cc.tintTo(2, 255, 0, 255);//修改颜色到指定值 var action = cc.fadeTo(1.0, 0);//修改透明度到指定值 ...
UGUI DOTween渐隐渐现
N的专栏
05-17 1万+
Tween tweenAlpha; tweenAlpha = DOTween.To(() => MaskSpr.fillAmount, x => MaskSpr.fillAmount = x, 1f, RISE_TIME).OnComplete(() =>
es6-tween:tween.js的ES6版本
05-11
es6-tween 由于没有社区的支持，也没有对作者的经济支持，因此该项目的开发被暂停 高性能动画，无后顾之忧 适用于Web和节点的简单，模块化和功能化的动画库 在性能很重要的地方需要使用补间库 灵活，可扩展，模块化...
JS使用tween.js动画库实现轮播图并且有切换功能
10-18
JavaScript（JS）和相关的动画库如tween.js，经常被用来实现具有平滑过渡和交互动效的轮播图功能。本文将详细介绍如何利用tween.js库实现一个具有切换功能的轮播图。 首先，要实现轮播图的切换功能，我们需要构建...
前端项目-es6-tween.zip
09-03
在"es6-tween-master"这个项目中，你可以期待看到如何巧妙地结合ES6的新特性与tween.js库，来创建出流畅、富有表现力的前端动画。通过对这些概念的理解和实践，你将能够提升自己的前端开发技能，打造出更具吸引力的...
tween-one:动画化一个React元素
04-29
rc-tween-one ReactTweenOne组件 浏览器支持 IE 10以上 :check_mark: Chrome31.0+ :check_mark: Firefox 31.0+ :check_mark: Opera 30.0+ :check_mark: Safari 7.0以上 :check_mark: 发展 npm install npm ...
Dotween 淡入淡出 循环效果
热门推荐
五千年的后羿
05-23 3万+
最重要的一代码： 物体.GetComponent().material.DOFade(1,1).SetLoops(-1,LoopType.Yoyo); 获取你需要闪烁的物体上的材质球，用DOTween的DOFade方法，让他在一秒内完全显示，加上了循环SetLoops 第一个参数是循环次数，-1是无限循环，第二个参数是循环的模式（LoopType.Yoyo）是悠悠球的循环方式，现渐渐显示，再渐渐
iTween基础之Fade(淡入淡出)
人生如游戏，不如做游戏，
03-18 1万+
一、基础介绍 FadeTo:从当前透明度变到目标透明度 FadeFrom:从给定透明度变到原始透明度 FadeUpdate:类似于FadeTo，在Update()方法或循环环境中调用。提供每帧改变属性值的环境。不依赖于EasrType. Fade只适用于GUITexture组件,GUIText组件,renderer组件和light组件.
Unity DoTween 渐隐渐现文字和图片效果
我知道你很急,但是路要一步步走
09-21 4551
QF使用 : this.Sequence() // 渐现文字和背景 .Delay(7.0f).Event(() => { Log.I("延时7秒执行, 渐现JsonWorld文字和背景"); DisplayJsonWorld(); RawResultWordBG.DOFade(1, 3); TxtTitle.DOFade(1, 3); }) .Delay(9.0f).Event(() =>..
【虚拟仿真】Unity3D中模型的渐隐渐现效果实现
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
07-08 5642
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875 一、前言 最近项目上要实现一个模型渐隐渐现的效果，研究了一下，分享出来。 这个主要是用到了Shader（但不用学）和DoTween动画插件。 文中示例代码简单明了，感兴趣的小伙伴可以参考一下。 二、效果展示及源码下载 源码下载： https://download.csdn.net/download/q764424567/20079897 三、正文 界面没啥好说的： 代码： .
jQuery实现图片轮播（淡入淡出效果）
Linustw的博客
07-29 2162
实现思路：用一个容器把图片都放进去，容器的overflow为hidden，设一个定时器，每间隔一段时间就将其中一张图片的display设为block，其他的都为none。
TWEEN动画、JQUERY、ES6 — 1、定时器和TWEEN动画
weixin_34275734的博客
10-23 503
1、定时器的基础知识(设置、清除、返回值分析) JS中的定时器一共有两种： 1、window.setTimeout([function],[interval])：设置一个定时器,当到达指定时间后执行对应的方法(执行一次定时器就结束了) 2、window.setInterval([function],[interval])：设置一个定时器,当到达指定时间后执行对应的方法(以后每间隔这么长时间都要从新...
jQ版渐隐渐现轮播图(自看,内含详细思路,用ajax异步处理的)
weixin_33912246的博客
02-24 325
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html,body,div,ul,li{
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4500
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
最新发布
李浩洋
09-24 260
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。up-form组件 :model=“formData” :rules=“rules”要赋初始值
Flutter实现轮播图动画的隐式动画控件步骤
在Flutter中实现轮播图效果通常涉及对动画组件的巧妙运用，特别是隐式动画和显式动画。本文将重点讲解如何使用隐式动画控件，如AnimatedOpacity，来创建一个具有FadeIn/FadeOut效果的轮播图。 首先，了解Flutter的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值