react-liuziyao

## swiper滑动 ``` import {swiper} from 'react-liuziyao' new swiper('swiper',{ // swiper为class AutomaticRotary:true, //true为自动轮播，fasle为默认值 RotaryTime:3000, //true为自动轮播，fasle为默认值 navShow:true, //是否显示导航跟随，flase为默认值 });

Usage no npm install needed!

<script type="module">
  import reactLiuziyao from 'https://cdn.skypack.dev/react-liuziyao';
</script>

README

npm install --save react-liuziyao

swiper滑动

```
import {swiper} from 'react-liuziyao'
new swiper('swiper',{   // swiper为class
    AutomaticRotary:true,	//true为自动轮播，fasle为默认值
    RotaryTime:3000,	//true为自动轮播，fasle为默认值
    navShow:true,	//是否显示导航跟随，flase为默认值
});`
.swiper{
    height: 2.4rem;
    background: #ffffff;
}
<div className='swiper'>
      <div className={`wangsheng-swiper-container`}>
          <div className="swiper-slide">
              第一页
          </div>
          <div className="swiper-slide">
              第二页
          </div>
      </div>
</div>
```

移动端轮播图

   import {CreateRoundMap} from 'react-liuziyao'
   new CreateRoundMap("CreateRoundMap",{
       img:[
           'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg',
           'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg',
           'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg',
           'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg'],	//指定轮播图片
       scrollDirection:"top",		//滚动方向		//默认left（必须小写）
       // AutoPlay:false,			//默认为true 自动播放轮播图
       AutoPlayTime:1500,		//默认为3000 自动播放时间
       // NavOnShow:false,		// 默认为true显示状态  导航跟随
   });
   #CreateRoundMap{
       width: 100%;
       height: 120px;
   }
   <div id="CreateRoundMap"></div>

京东放大镜

   import {fangdajing} from 'react-liuziyao'
       new fangdajing('div1',{
       SpanWidth:"150px",SpanHeight:"150px",   //默认宽高100px;
       SpanBackground:"red",SpanOpacity:"0.2", //默认为黄色 0.5透明度
       fangdakuangWidth:"350px",fangdakuangHeight:"350px", //（取景框）默认为1.2倍
       fangdakuangWeizhi:'top',    //（取景框方向）默认为right
       fangdakuangImgWidth:"1000px",fangdakuangImgHeight:"1000px", //（img）默认为两倍缩放
   });
   <div id="div1">  <img src="b1.jpg">  </div>

发布订阅模式（用于组件通讯）

    import SubscribePublishing from "./SubscribePublishing";
    let SubPub = new SubscribePublishing
    SubPub.Subscribe('qqq',(data1,data2)=>{  /*  订阅事件  */
        console.log(data1,data2)
    })
    SubPub.Publishing('qqq',1,2,3,4,5)   /*  发布事件  */