Question

我用html，css和js创建了一个轮播。以下是相应的代码。

HTML：

<div class="doorHardwareTile" id="dh">
  <img class="mySlidesDH slide-to-right" src="images/Folder1/1.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/2.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/3.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/4.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/5.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/6.jpg?" alt="" />

<div class="overlayDH">
    <img src="images/Folder1/0.png?" alt="" />
</div>

</div>

CSS：

 .slide-to-right {
  position: relative;
  animation: animateright 0.5s;
  }

  @keyframes animateright {
  from {
    right: -300px;
    opacity: 0;
   }
  to {
    right: 0;
    opacity: 1;
   }
  }

 .doorHardwareTile {
  display: flex;
  overflow: hidden;
  width: 560px;
  height: 373px;
  min-width: auto;
  min-height: auto;
  margin-bottom: 16px;
 }

.mySlidesDH {
 display: none;
 }

.overlayDH {
  position: absolute;
  width: 560px;
  height: 373px;

  z-index: 800;
  opacity: 0;
  transition: 0.5s ease;
 }

 .overlayDH img {
  object-fit: cover;
  width: 100%;
  height: 100%;

  align-content: center;
}

.doorHardwareTile:hover .overlayDH {
  opacity: 1;
}

JS：

$(function doorHardwareSS() {
  var myIndex = 0;
  carouselDH();

  function carouselDH() {
    var i;
    var totalElements = document.getElementsByClassName("mySlidesDH");
    for (i = 0; i < totalElements.length; i++) {
      totalElements[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > totalElements.length) {
      myIndex = 1;
    }
    totalElements[myIndex - 1].style.display = "block";
    setTimeout(carouselDH, 5000);
  }
});

这在html，css和js中完美地工作。

但是，当我尝试在REACT中复制相同内容时。它在以下行中引发错误

totalElements[i].style.display = "none";

错误是“未捕获的TypeError：无法读取未定义的属性'style'。”

轮播中我想要的图像是从DB中基于类的组件中检索的。

我只是REACT的初学者。对于实现相同结果的任何帮助，我将深表感谢。

下面是在基于类的组件中调用的REACT代码。

import React from "react";

const ImageSlide = props => {
  if (
    props.imagePath === undefined ||
    props.imagePath === null ||
    props.imagePath.length === 0
  )
    return null;

  return (
    <div className={props.styles}>
      {props.imagePath.map(image => {
        const path = props.svgsArray.find(str => str.indexOf(image.hash) > 1);
        // console.log(path);
        return (
          <img
            className="mySlidesDH slide-to-right"
            key={image.id}
            src={path}
            alt={props.styles}
          />
        );
      })}
      <div className={props.styles2}>
          <img src={require("./images/1_Door_hardware/0.png?")} alt="" />
      </div>
    </div>
  );
};

export default ImageSlide;

请注意，值doorHardwareTile通过props.styles传递，值overlayDH通过props.styles2传递

Answer 1

对于React，请尝试以下软件包：

https://github.com/FormidableLabs/react-animations

对于React Native：

https://facebook.github.io/react-native/docs/animations

这里是一个示例，但对于react-native来说，它可能对如何进行简单的右滑动有相同的想法，但是一旦出现，您仍然需要一个函数来淡出容器或将不透明度设置为零。向右滑动并具有另一功能，可以通过替换容器内的图片将其设置为原始位置。

容器在 this.state 中的第一个设置位置：

this.state = {
   containerRightSlideAnim: new Animated.ValueXY({x: 0, y: 0})
}

在 X 所需的构造函数设置位置内：

this.containerRightSlide = Animated.timing(this.state.containerRightSlideAnim, {
      toValue: {x: 200, y: 0},
      duration: 10000,
      //speed: 0.1,
      easing: Easing.in(Easing.ease)
})

使函数能够触发正确的幻灯片动画：

triggerRightSlide(){
 this.containerRightSlide.start();
}

添加渲染内部：

render() {
    const animatableRightSlideStyle = this.state.containerSlideAnim.getTranslateTransform()

    return (<View>
        <Animated.View style={[animatableRightSlideStyle]}></Animated.View>
    </View>)
}

Answer 2

这是Carousel的工作原型，在ReactJS Live Demo here中有分页

HTML

<h2>Prototype Carousel with pagination in ReactJS</h2>
<div id="app"></div>

JS React

    import React from 'react'
    import ReactDOM from 'react-dom'

    class Pagination extends React.Component {
        constructor( props ){
            super( props );
        }

        paginationRender = ( source, activeItem, handleEvent ) => {

            const items = source.map(( item, i ) => {
                let itemClass = 'page-item';
                if( item.id === activeItem ){
                    itemClass += ' active';
                }
                return <li key={i} className={ itemClass }>
                    <a className="page-link" href="#"
                    onClick={ e => handleEvent( e, 'clickItem', item )}>
                        { i + 1 }</a>
                </li>;
            });

            return <ul className="pagination pagination-sm justify-content-center">
                <li className="page-item">
                    <a className="page-link" href="#" 
                        onClick={e => handleEvent( e, 'prevItem', {}, items )}>Prev</a>
                </li>
                {items}
                <li className="page-item">
                    <a className="page-link" href="#"
                        onClick={e => handleEvent( e, 'nextItem', {}, items )}>Next</a>
                </li>
            </ul>;
        };

        render() {
            const { itemsSrc, activeItem, handleEvent } = this.props;
            //console.info('MenuContent->render()', { source });

            return <div>{this.paginationRender( itemsSrc, activeItem, handleEvent ) }</div>;
        }
    }


    class Carousel extends React.Component {
        constructor( props ){
            super( props );
        }

        carouselRender = (  source, activeItem, handleEvent ) => {
            //console.info('Carousel->carouselRender [0]', { source, state: this.state });

             const indicators = source.map(( item, i ) => {
                let itemClass = '';
                if( item.id === activeItem ){
                    itemClass += ' active';
                }
                //console.info('Carousel->carouselRender [3]', { id: item.id, item, pageItemClass, activeItem: activeItem });
                return <li key={i} data-target="#demo" data-slide-to="1" className={ itemClass }
                                 onClick={ e => handleEvent( e, 'clickItem', item )}>></li>;
            });   

            const imgs = source.map(( item, i ) => {
                let itemClass = 'carousel-item';
                if( item.id === activeItem ){
                    itemClass += ' active';
                }
                //console.info('Carousel->carouselRender [5]', { id: item.id, item, pageItemClass, activeItem: activeItem });
                return <div key={i} className={ itemClass }>
                    <img src={item.src} className="img-fluid" alt="New York" />
                </div>;
            });

            //console.info('Carousel->carouselRender [7]', { });
            return <div id="demo" className="carousel slide" data-ride="carousel">
                                <ul className="carousel-indicators">
                                    { indicators }
                                </ul>
                                <div className="carousel-inner">
                                    { imgs }
                                </div>
                                <a className="carousel-control-prev" href="#demo" data-slide="prev">
                                    <span className="carousel-control-prev-icon"
                                        onClick={e => handleEvent( e, 'prevItem', {}, source )}>
                                    </span>
                                </a>
                                <a className="carousel-control-next" href="#demo" data-slide="next">
                                    <span className="carousel-control-next-icon"
                                        onClick={e => handleEvent( e, 'nextItem', {}, source )}>
                                    </span>
                                </a>
                            </div>;
        };

        render() {
            const { itemsSrc, activeItem, handleEvent } = this.props;
            //console.info('MenuContent->render()', { source });

            return <div>{this.carouselRender( itemsSrc, activeItem, handleEvent ) }</div>;    
        }
    }

    const inputProps = {
        itemsSrc: [
                { id: 0,
                    name: 'Los Angeles',
                    level: 'basic',
                    src: 'https://www.w3schools.com/bootstrap4/la.jpg'
             },
                {
                    id: 1,
                    name: 'Chicago',
                    level: 'basic',
                    src: 'https://www.w3schools.com/bootstrap4/chicago.jpg'
                },
                {
                    id: 2,
                    name: 'New York',
                    level: 'advanced',
                    src: 'https://www.w3schools.com/bootstrap4/ny.jpg'
                },           
            ],
    };

    class Wrapper extends React.Component {
        constructor( props ){
            super( props );
            this.state = {
                activeItem: 0,
            };
        }

        handleEvent = ( e, actionType, item, items ) => {
            e.preventDefault();
            let itemsLength, activeItem;

            switch( actionType ){
                case 'clickItem':
                    //console.info('MenuContent->paginationRender', { actionType, id: item.id, item });
                    this.setState({ activeItem: item.id });
                break;
                case 'prevItem':
                    activeItem = this.state.activeItem;
                    if ( activeItem === 0  ){
                        break;
                    }
                    activeItem -= 1;
                    this.setState({ activeItem });
                break;
                case 'nextItem':
                    itemsLength = items.length;
                    activeItem = this.state.activeItem;
                    if (activeItem === itemsLength -1) {
                        break;
                    }
                    activeItem += 1;
                    this.setState({ activeItem });
                break;
            }
            //console.info('MenuContent->handleEvent()', { actionType, item, items });

        }

        render(){
            let props = this.props;
            const { activeItem } = this.state;
            props = { ...props, handleEvent: this.handleEvent, activeItem };

            return <div className="App">

                <div className="container-fluid">
                    <div className="row">
                        <div className="col-1">
                        </div>
                        <div className="col-10">

                            <Pagination { ...props }/>
                            <Carousel { ...props }/>
                        </div>
                        <div className="col-1">
                        </div>
                    </div>
                </div>
            </div>;
        }
    }

    ReactDOM.render(<Wrapper {  ...inputProps }/>, document.getElementById('app'));

在REACT中使用js和CSS进行轮播

2 个答案:

HTML

JS React