react如何实现banner轮播效果-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

react如何实现banner轮播效果

这篇文章将为大家详细讲解有关react 如何实现banner轮播效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联从2013年创立,公司以成都网站建设、网站设计、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户数千家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。

最近在看react , jsx的语法一开始看起来确实不习惯,但是确实比较灵活

运行效果:

react 如何实现banner轮播效果

import React from 'react';
// import ShadowDOM from 'react-shadow';
import './index.css';
let timeId = null;  // 循环定时的状态
export default class Index extends React.Component {
  constructor () {
    super();
    this.state = {
      timeId: null,
      list: [],
      listClone: [],
      current: 0
    };
  }
  // 删除列表项目
  deleItem (title, date, index) {
    let data = [...this.state.list];
    data.splice(index, 1);
    this.setState({
      list: data
    });
    alert('删除成功!');
  }
  // 点击状态点切换状态
  toggleState (item, index) {
    let data = this.state.listClone;
    this.setState({
      list: data[index],
      current: index
    });
  }
  // 鼠标移入状态点
  stateMouseenter () {
    clearInterval(timeId);
  }
  // 鼠标移出状态点
  stateMouseleave () {
    this.loop(3000); 
  }
  // 轮播事件
  loop (speed) {
    timeId = setInterval(() => {
      let index = this.state.current;
      let data = this.state.listClone;
      if (index < this.state.list.length - 1) {
        index ++;
        this.setState({
          list: data[index],
          current: index
        });
      } else {
        index = 0;
        this.setState({
          list: data[index],
          current: index
        });
      }
    }, speed);
  }
  render () {
    let data = this.state.list;
    let active = '';
    // 数据列表
    let Li = data.map((item, index) => {
      return (
        
  • {item.title + '==' + index + new Date().getTime()} {item.date}
  • ); }); // 状态点 let span = this.state.listClone.map((item, index) => { index === this.state.current ? active = 'active' : active = ''; return ( {index + 1} ); }); return (

    {span}

      {Li}
    ); } componentWillMount () { // 页面加载的数据 let list = [ { date: '2018-02-12 12:54:52', title: '● 今天深圳市天气很好,很适合外出旅游1' }, { date: '2018-02-12 12:54:52', title: '● 今天深圳市天气很好,很适合外出旅游2' }, { date: '2018-02-12 12:54:52', title: '● 今天深圳市天气很好,很适合外出旅游3' }, { date: '2018-02-12 12:54:52', title: '● 今天深圳市天气很好,很适合外出旅游4' }, { date: '2018-02-12 12:54:52', title: '● 今天深圳市天气很好,很适合外出旅游5' } ]; this.setState({ list: [...list], listClone: [[...list], [...list], [...list], [...list], [...list]] }); this.loop(3000); } componentDidMount () { } componentDidUpdate () { } componentWillUnmount () {} };

    css:

    .list-item {
      width: 600px;
      padding: 10px;
      margin: 40px auto;
      background: #ccc;
      border: 1px solid #eee;
    }
    .list-item li {
      margin: 10px 0;
      font-size: 14px;
      color: #333;
      text-align: left;
    }
    .list-item li span:nth-child(2) {
      float: right;
    }
    .item-state {
      text-align: right;
    }
    .item-state span {
      display: inline-block;
      height: 20px;
      width: 20px;
      color: #333;
      line-height: 20px;
      text-align: center;
      background: #eee;
      border-radius: 20px;
      margin-left: 5px;
      cursor: pointer;
    }
    .item-state span.active {
      background: red;
    }

    关于react 如何实现banner轮播效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


    分享文章:react如何实现banner轮播效果
    文章位置:http://kswsj.cn/article/jiccpo.html

    其他资讯