Xxw-banner NPM

西西沃banner轮播组件

Install

npm i xxw-banner

Usage

import XxwBanner from 'xxw-banner';

onItemClick = (index, item) => {
  console.log(index, item)
}
render(){
  const list=[
       {image:"https://m.360buyimg.com/babel/jfs/t1/9856/12/6040/100933/5bdfdd00E59a88f2e/c7f2df496ea71f15.jpg",url:"http://www.taobao.com"},
       {image:"https://img1.360buyimg.com/da/jfs/t1/9298/40/5813/67443/5bdfc8a1Ef8774956/feff58e3282c87b9.jpg",url:"http://www.taobao.com"},
       {image:"https://img1.360buyimg.com/pop/jfs/t1/3780/19/14094/127074/5bd9a725E55b0b41e/34e852227ad6fb03.jpg",url:"http://www.taobao.com"},
       {image:"https://m.360buyimg.com/babel/jfs/t1/10169/15/1976/87990/5bdff178E24635bd9/f57c3663534bb51f.jpg",url:"http://www.taobao.com"},
       {image:"https://m.360buyimg.com/babel/jfs/t1/4373/14/13405/96860/5bd7fdedE6698f1f4/f781db78621fd138.jpg",url:"http://www.taobao.com"}
  ];
  const time = 3000;
  const transitionEnterTimeout = 1000;
  const transitionLeaveTimeout = 1000;

  return (
    <div>
      <XxwBanner list={list} 
      time={time} 
      transitionEnterTimeout={transitionEnterTimeout} 
      transitionLeaveTimeout={transitionLeaveTimeout}
      onItemClick={this.onItemClick}
       />
    </div>
  )
}

参数说明

1.time 定时器切换的时长 单位毫秒
2.transitionEnterTimeout 数值，设置入场动画的执行时间 单位毫秒
3.transitionLeaveTimeout 数值，设置出场动画的执行时间 单位毫秒
4.onItemClick  接收banner图点击的回调方法
参数1 banner图索引 从0开始
参数2 banner图数据