react轮播图

引入swiper插件：
var ComponentBanner=React.createClass({
//设置默认的数据源
getDefaultProps:function(){
return {sourceUrl:
'http://datainfo.duapp.com/shopdata/getBanner.php'}
},
//设置状态 存储变化的数据
getInitialState:function(){
return {result:[]}
},
//willmount里面去发送ajax请求
componentWillMount:function(){
var _this=this;
Common.http(this.props.sourceUrl,function(data){
console.log(typeof data);
//jsonp ---- callback(json);
var point=data.indexOf("(");
var length=data.length;
data=data.substring(point+1,length-1);
data=JSON.parse(data);
console.log(data);
//把得到的数据放进result里面
_this.setState({result:data});
});
},
render:function(){
//jsx支持叠加,jsx本身就是数组
var s=[];//存储jsx叠加后的总的jsx结果 数组
for(var i=0;i<this.state.result.length;i++){
var img=JSON.parse(this.state.result[i].goodsBenUrl)[0];
s.push(<div style={styleSheets.banner} className="swiper-slide">
<img style={styleSheets.bannerimg}
src={img}/>
</div>);
}
return(
<div style={styleSheets.banner}>
<div className="swiper-container">
<div className="swiper-wrapper">
{s}
</div>
</div>
</div>
);
},
componentDidUpdate:function(){
var swiper=new Swiper('.swiper-container',{
autoplay:1000,loop:true
});
}
});

使用react-swipe和swipe-js-iso
npm install react swipe-js-iso react-swipe
import React from 'react'
import './banner.less'
import ReactSwiper from 'react-swipe'
import banner1 from '../../img/banner1.png'
import banner2 from '../../img/banner2.png'
import banner3 from '../../img/banner3.png'
class Banner extends React.Component {
constructor(prpos,context) {
super(prpos,context);
// this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
this.state = {
index: 0
}
}
render() {
var opt = {
auto: 2000,
callback:function(index){
this.setState({index:index})
}.bind(this)
}
return (
<div>
<ReactSwiper className="carousel" swipeOptions={opt}>
<div>
<img src = {banner1} />
</div>
<div>
<img src = {banner2} />
</div>
<div>
<img src = {banner3} />
</div>
</ReactSwiper>
<div className="index-container">
<ul>
<li className={this.state.index === 0 ? "selected" : ''}></li>
<li className={this.state.index === 1 ? "selected" : ''}></li>
<li className={this.state.index === 2 ? "selected" : ''}></li>
</ul>
</div>
</div>
)
}
componentDidMount() {

}
}

export default Banner

less：
.index-container {
height: 0px;
position: relative;
ul {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top:-20px;
}
li {
display: inline-block;
height: 9px;
width: 9px;
border-radius: 9px;
background-color: #eee;
margin: 0 5px;
}
li.selected {
background-color: #009de4;
}
}
.carousel{
width: <
4000
span class="hljs-number">100%;
height: 5rem;
img{
height: 5rem;
width: 100%
}
}