Question

我正在尝试在angular2项目中实现此滑块，但我似乎无法在typescript中使用它。提前谢谢。

<!DOCTYPE html>
<html class=''>

  <head>
    <script src='https://production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script>
    <script src='https://production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script>
    <script src='https://production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script>
    <meta charset='UTF-8'>
    <meta name="robots" content="noindex">
    <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
    <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
    <link rel="canonical" href="https://codepen.io/suez/pen/OjGQza?depth=everything&order=popularity&page=9&q=react&show_forks=false" />


    <style class="cp-pen-styles">
      *,
      *:before,
      *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: 'Roboto', Helvetica, Arial, sans-serif;
        background: #000;
      }

      .slider {
        overflow: hidden;
        position: relative;
        height: 100vh;
        color: #fff;
      }

      .slider__top-heading {
        z-index: 12;
        position: absolute;
        left: 0;
        top: 100px;
        width: 100%;
        text-align: center;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        -webkit-transition: all 0.5s 1s;
        transition: all 0.5s 1s;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        opacity: 0;
      }

      .slider.s--ready .slider__top-heading {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }

      .slider__slides {
        position: relative;
        height: 100%;
      }

      .slider__slide {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .slider__slide.s--active {
        pointer-events: auto;
      }

      .slider__slide-content {
        z-index: 6;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
        text-transform: uppercase;
        line-height: 1;
      }

      .slider__slide-subheading {
        margin-bottom: 20px;
        font-size: 24px;
        letter-spacing: 2px;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0;
        -webkit-transition: 0.5s;
        transition: 0.5s;
      }

      .slider__slide.s--active .slider__slide-subheading {
        -webkit-transition-delay: 0.65s;
        transition-delay: 0.65s;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

      .slider__slide-heading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 20px;
        font-size: 60px;
        letter-spacing: 12px;
      }

      .slider__slide-heading span {
        display: block;
        opacity: 0;
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
        -webkit-transition: all 0.33333s;
        transition: all 0.33333s;
      }

      .slider__slide.s--prev .slider__slide-heading span {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
      }

      .slider__slide.s--active .slider__slide-heading span {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

      .slider__slide-heading span:nth-child(1) {
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(1) {
        -webkit-transition-delay: 0.33333s;
        transition-delay: 0.33333s;
      }

      .slider__slide-heading span:nth-child(2) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(2) {
        -webkit-transition-delay: 0.43333s;
        transition-delay: 0.43333s;
      }

      .slider__slide-heading span:nth-child(3) {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(3) {
        -webkit-transition-delay: 0.53333s;
        transition-delay: 0.53333s;
      }

      .slider__slide-heading span:nth-child(4) {
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(4) {
        -webkit-transition-delay: 0.63333s;
        transition-delay: 0.63333s;
      }

      .slider__slide-heading span:nth-child(5) {
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(5) {
        -webkit-transition-delay: 0.73333s;
        transition-delay: 0.73333s;
      }

      .slider__slide-heading span:nth-child(6) {
        -webkit-transition-delay: 0.5s;
        transition-delay: 0.5s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(6) {
        -webkit-transition-delay: 0.83333s;
        transition-delay: 0.83333s;
      }

      .slider__slide-heading span:nth-child(n+7) {
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
      }

      .slider__slide.s--active .slider__slide-heading span:nth-child(n+7) {
        -webkit-transition-delay: 0.93333s;
        transition-delay: 0.93333s;
      }

      .slider__slide-readmore {
        position: relative;
        font-size: 14px;
        text-transform: lowercase;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        cursor: pointer;
        opacity: 0;
        -webkit-transition: 0.5s;
        transition: 0.5s;
      }

      .slider__slide.s--active .slider__slide-readmore {
        -webkit-transition-delay: 0.65s;
        transition-delay: 0.65s;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

      .slider__slide-readmore:before {
        content: '';
        position: absolute;
        left: -2px;
        top: -3px;
        width: calc(100% + 4px);
        height: calc(100% + 6px);
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: scaleX(0.3);
        transform: scaleX(0.3);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
      }

      .slider__slide-readmore:hover:before {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
      }

      .slider__slide-parts {
        position: absolute;
        left: 0;
        top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
      }

      .slider__slide-parts:after {
        content: '';
        z-index: 5;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
      }

      .slider__slide-part {
        position: relative;
        width: 25%;
        height: 100%;
      }

      .slider__slide-part-inner {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        background-size: 0 0;
        background-repeat: no-repeat;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
      }

      .slider__slide-part-inner:before {
        content: '';
        position: absolute;
        width: 100vw;
        height: 100%;
        background-image: inherit;
        background-size: cover;
        background-position: center center;
        -webkit-transition: opacity 0.25s;
        transition: opacity 0.25s;
        opacity: 0;
      }

      .slider__slide-part:nth-child(1) .slider__slide-part-inner {
        z-index: 3;
        -webkit-transition-delay: 0.24s;
        transition-delay: 0.24s;
        -webkit-transform: translateX(-32.5%);
        transform: translateX(-32.5%);
      }

      .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner {
        -webkit-transition-delay: 0.28s;
        transition-delay: 0.28s;
      }

      .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {
        left: 0vw;
        -webkit-transition-delay: 0.365s;
        transition-delay: 0.365s;
      }

      .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {
        -webkit-transition-delay: 0.28s;
        transition-delay: 0.28s;
      }

      .slider__slide-part:nth-child(2) .slider__slide-part-inner {
        z-index: 2;
        -webkit-transition-delay: 0.16s;
        transition-delay: 0.16s;
        -webkit-transform: translateX(-65%);
        transform: translateX(-65%);
      }

      .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner {
        -webkit-transition-delay: 0.36s;
        transition-delay: 0.36s;
      }

      .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {
        left: -25vw;
        -webkit-transition-delay: 0.285s;
        transition-delay: 0.285s;
      }

      .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {
        -webkit-transition-delay: 0.36s;
        transition-delay: 0.36s;
      }

      .slider__slide-part:nth-child(3) .slider__slide-part-inner {
        z-index: 1;
        -webkit-transition-delay: 0.08s;
        transition-delay: 0.08s;
        -webkit-transform: translateX(-97.5%);
        transform: translateX(-97.5%);
      }

      .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner {
        -webkit-transition-delay: 0.44s;
        transition-delay: 0.44s;
      }

      .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {
        left: -50vw;
        -webkit-transition-delay: 0.205s;
        transition-delay: 0.205s;
      }

      .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {
        -webkit-transition-delay: 0.44s;
        transition-delay: 0.44s;
      }

      .slider__slide-part:nth-child(4) .slider__slide-part-inner {
        z-index: 0;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transform: translateX(-130%);
        transform: translateX(-130%);
      }

      .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner {
        -webkit-transition-delay: 0.52s;
        transition-delay: 0.52s;
      }

      .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {
        left: -75vw;
        -webkit-transition-delay: 0.125s;
        transition-delay: 0.125s;
      }

      .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {
        -webkit-transition-delay: 0.52s;
        transition-delay: 0.52s;
      }

      .slider__slide.s--active .slider__slide-part-inner {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition-timing-function: ease;
        transition-timing-function: ease;
      }

      .slider__slide.s--active .slider__slide-part-inner:before {
        opacity: 1;
      }

      .slider__control {
        z-index: 100;
        position: absolute;
        left: 50px;
        top: 50%;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
        -webkit-transition: all 0.5s 1s;
        transition: all 0.5s 1s;
        cursor: pointer;
      }

      .slider__control:before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 20px;
        margin-left: -10px;
        margin-top: -10px;
        border: 2px solid #000;
        border-bottom: none;
        border-right: none;
        -webkit-transform: translateX(5px) rotate(-45deg);
        transform: translateX(5px) rotate(-45deg);
      }

      .slider__control--right {
        left: auto;
        right: 50px;
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
      }

      .slider__control--right:before {
        -webkit-transform: translateX(-5px) rotate(135deg);
        transform: translateX(-5px) rotate(135deg);
      }

      .slider.s--ready .slider__control {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
      }

      .icon-link {
        z-index: 100;
        position: absolute;
        left: 5px;
        bottom: 5px;
        width: 32px;
      }

      .icon-link img {
        width: 100%;
        vertical-align: top;
      }

      .icon-link--twitter {
        left: auto;
        right: 5px;
      }

    </style>
  </head>

  <body>
    <div id="app"></div>
    <a href="https://dribbble.com/shots/3774469-T-R-A-V-E-L-E-R" target="_blank" class="icon-link">

    </a>
    <a href="https://twitter.com/NikolayTalanov" target="_blank" class="icon-link icon-link--twitter">

    </a>

    <script>
      'use strict';

      function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function _possibleConstructorReturn(self, call) {
        if (!self) {
          throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
        }
        return call && (typeof call === "object" || typeof call === "function") ? call : self;
      }

      function _inherits(subClass, superClass) {
        if (typeof superClass !== "function" && superClass !== null) {
          throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
        }
        subClass.prototype = Object.create(superClass && superClass.prototype, {
          constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
          }
        });
        if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
      }

      var CitiesSlider = function(_React$Component) {
        _inherits(CitiesSlider, _React$Component);

        function CitiesSlider(props) {
          _classCallCheck(this, CitiesSlider);

          var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

          _this.IMAGE_PARTS = 4;

          _this.changeTO = null;
          _this.AUTOCHANGE_TIME = 4000;

          _this.state = {
            activeSlide: -1,
            prevSlide: -1,
            sliderReady: false
          };
          return _this;
        }

        CitiesSlider.prototype.componentWillUnmount = function componentWillUnmount() {
          window.clearTimeout(this.changeTO);
        };

        CitiesSlider.prototype.componentDidMount = function componentDidMount() {
          var _this2 = this;

          this.runAutochangeTO();
          setTimeout(function() {
            _this2.setState({
              activeSlide: 0,
              sliderReady: true
            });
          }, 0);
        };

        CitiesSlider.prototype.runAutochangeTO = function runAutochangeTO() {
          var _this3 = this;

          this.changeTO = setTimeout(function() {
            _this3.changeSlides(1);
            _this3.runAutochangeTO();
          }, this.AUTOCHANGE_TIME);
        };

        CitiesSlider.prototype.changeSlides = function changeSlides(change) {
          window.clearTimeout(this.changeTO);
          var length = this.props.slides.length;

          var prevSlide = this.state.activeSlide;
          var activeSlide = prevSlide + change;
          if (activeSlide < 0) activeSlide = length - 1;
          if (activeSlide >= length) activeSlide = 0;
          this.setState({
            activeSlide: activeSlide,
            prevSlide: prevSlide
          });
        };

        CitiesSlider.prototype.render = function render() {
          var _this4 = this;

          var _state = this.state;
          var activeSlide = _state.activeSlide;
          var prevSlide = _state.prevSlide;
          var sliderReady = _state.sliderReady;

          return React.createElement(
            'div', {
              className: classNames('slider', {
                's--ready': sliderReady
              })
            },
            React.createElement(
              'p', {
                className: 'slider__top-heading'
              },
              'Travelers'
            ),
            React.createElement(
              'div', {
                className: 'slider__slides'
              },
              this.props.slides.map(function(slide, index) {
                return React.createElement(
                  'div', {
                    className: classNames('slider__slide', {
                      's--active': activeSlide === index,
                      's--prev': prevSlide === index
                    }),
                    key: slide.city
                  },
                  React.createElement(
                    'div', {
                      className: 'slider__slide-content'
                    },
                    React.createElement(
                      'h3', {
                        className: 'slider__slide-subheading'
                      },
                      slide.country || slide.city
                    ),
                    React.createElement(
                      'h2', {
                        className: 'slider__slide-heading'
                      },
                      slide.city.split('').map(function(l) {
                        return React.createElement(
                          'span',
                          null,
                          l
                        );
                      })
                    ),
                    React.createElement(
                      'p', {
                        className: 'slider__slide-readmore'
                      },
                      'read more'
                    )
                  ),
                  React.createElement(
                    'div', {
                      className: 'slider__slide-parts'
                    }, [].concat(Array(_this4.IMAGE_PARTS).fill()).map(function(x, i) {
                      return React.createElement(
                        'div', {
                          className: 'slider__slide-part',
                          key: i
                        },
                        React.createElement('div', {
                          className: 'slider__slide-part-inner',
                          style: {
                            backgroundImage: 'url(' + slide.img + ')'
                          }
                        })
                      );
                    })
                  )
                );
              })
            ),
            React.createElement('div', {
              className: 'slider__control',
              onClick: function onClick() {
                return _this4.changeSlides(-1);
              }
            }),
            React.createElement('div', {
              className: 'slider__control slider__control--right',
              onClick: function onClick() {
                return _this4.changeSlides(1);
              }
            })
          );
        };

        return CitiesSlider;
      }(React.Component);

      var slides = [{
        city: 'Paris',
        country: 'France',
        img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/paris.jpg'
      }, {
        city: 'Singapore',
        img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/singapore.jpg'
      }, {
        city: 'Prague',
        country: 'Czech Republic',
        img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/prague.jpg'
      }, {
        city: 'Amsterdam',
        country: 'Netherlands',
        img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/amsterdam.jpg'
      }, {
        city: 'Moscow',
        country: 'Russia',
        img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/moscow.jpg'
      }];

      ReactDOM.render(React.createElement(CitiesSlider, {
        slides: slides
      }), document.querySelector('#app'));
      //# sourceURL=pen.js

    </script>
  </body>

</html>

Answer 1

在angular-cli.json

中添加对库的引用

"scripts": [
"your_path/my_library.js"
],

然后在导入下声明您的库。

declare var myLib: any;

现在您可以使用库中的任何函数

mylib.foo();

在angular2中使用外部JS liberary

1 个答案: