react 实现banner轮播效果

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

运行效果:

代码:

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 (
        <li onClick={this.deleItem.bind(this, item.title, item.date, index)} key={index}>
          <span>{item.title + '==' + index + new Date().getTime()}</span>
          <span>{item.date}</span>
        </li>
      );
    });
    // 状态点
    let span = this.state.listClone.map((item, index) => {
      index === this.state.current ? active = 'active' : active = '';
      return (
        <span
          onClick={this.toggleState.bind(this, item, index)} 
          key={index}
          onMouseEnter={this.stateMouseenter.bind(this)}
          onMouseLeave={this.stateMouseleave.bind(this)}
          className={active}>
          {index + 1}
        </span>
      );
    });
    return (
      <div className="list-item">
        <p className="item-state">{span}</p>
        <ul>{Li}</ul>
      </div>
    );
  }
  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 实现轮播效果可以通过以下步骤实现: 1. 创建轮播图组件:创建一个轮播图组件来包含所有的图片和轮播图的逻辑。 2. 渲染图片:在轮播图组件中定义一个数组,用来存放所有的图片。使用 map 方法来遍历这个数组,渲染所有的图片。 3. 定义状态:在轮播图组件中定义一个状态,用来记录当前显示的图片的索引。初始值为0。 4. 轮播逻辑:使用定时器和 setState 方法来实现轮播逻辑。每隔一段时间,将当前显示的图片索引加1,然后调用 setState 方法来更新状态。当索引大于等于图片数组的长度时,将索引重置为0。 5. 添加控制按钮:可以添加左右控制按钮来控制轮播图的前进和后退。点击按钮时,调用 setState 方法来更新状态。 6. 完成轮播图组件:将所有的逻辑和 UI 结合起来,完成轮播图组件的编写。 以下是一个简单的轮播图组件代码示例: ```javascript import React, { useState, useEffect } from 'react'; const Carousel = ({ images }) => { const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { setActiveIndex(activeIndex => (activeIndex + 1) % images.length); }, 3000); return () => clearInterval(interval); }, [images.length]); const onPrevClick = () => { setActiveIndex(activeIndex => (activeIndex - 1 + images.length) % images.length); }; const onNextClick = () => { setActiveIndex(activeIndex => (activeIndex + 1) % images.length); }; return ( <div className="carousel"> <div className="carousel-images"> {images.map((src, index) => ( <img key={index} src={src} alt={`Image ${index}`} className={index === activeIndex ? 'active' : ''} /> ))} </div> <button onClick={onPrevClick}>Prev</button> <button onClick={onNextClick}>Next</button> </div> ); }; export default Carousel; ``` 在这个例子中,使用了 useState 和 useEffect 钩子函数来实现状态和定时器的功能。渲染图片时使用了 map 方法,根据当前显示的索引来给图片添加 active 类名,从而实现高亮显示。左右控制按钮的点击事件分别调用 onPrevClick 和 onNextClick 方法,通过 setActiveIndex 方法来更新状态。最后,将所有的 UI 和逻辑结合起来,形成一个完整的轮播图组件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值