React学习--轮播图组件

最新推荐文章于 2024-08-10 08:34:49 发布
cihai8773
最新推荐文章于 2024-08-10 08:34:49 发布
阅读量69
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/fantasyfiend/blog/653923
版权
 <!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
 <script type="text/javascript" src="js/react-with-addons.min.js"></script>
 <script type="text/javascript" src="js/react-dom.min.js"></script>
 <script type="text/javascript" src="js/browser.min.js"></script>
</head>
<style type="text/css">
 *{
  margin: 0;
  padding: 0;
 }
 .carousel_box_div{
  border: 2px solid #ccc;
  overflow: hidden;
  position: relative;
 }
 .carousel_box_div img{
  position: absolute;
  width: 100%;
  height: 100%;
  transition:left .3s linear;
  margin: 0;
 }
 .carousel_div{
  margin-left:auto;
  margin-right: auto;
 }
 .carousel_button_div{
  padding: 10px;
  text-align: center;
 }
 .carousel_button_span{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
 }
 .active_carousel_button{
  background-color: #444;
 }
 .carousel_button_prev_next_span{
  padding: 10px 3px;
  display: inline-block;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  margin: 0 15px;
  color: #aaa;
 }
 .carousel_button_prev_next_span:hover{
  background-color: #444;
  color: #fff;
 }
</style>
<body>
 <div id="carousel_box"></div>
</body>
 <script type="text/babel">
  var _data = [
   {
    url:"img/case1.jpg",
    alt:"case1"
   },
   {
    url:"img/case2.jpg",
    alt:"case2"
   },
   {
    url:"img/case3.jpg",
    alt:"case3"
   },
   {
    url:"img/case4.jpg",
    alt:"case4"
   },
   {
    url:"img/case5.jpg",
    alt:"case5"
   },
   {
    url:"img/case6.jpg",
    alt:"case6"
   },
   {
    url:"img/case7.jpg",
    alt:"case7"
   },
   {
    url:"img/case8.jpg",
    alt:"case1"
   }
  ];
  var props = {
   width:1010,
   height:408,
   delay:5000
  }
  var CarouselButton = React.createClass({
   getInitialState:function(){
    return {
     index:this.props.index,
     data:this.props.data,
    };
   },
   componentWillReceiveProps: function(props) {
    if (props.index != this.state.index) {
     this.setState({index:props.index});
    }
   },
   handleClick: function (event) {
    var span = event.target;
    var index = $(span).attr("data-index");
    this.props.indexChange(parseInt(index));
   },
   handlePrevClick: function () {
    var index = ((this.state.index + this.state.data.length) - 1) % this.state.data.length;
    this.props.indexChange(index);
   },
   handleNextClick: function () {
    var index = (this.state.index + 1) % this.state.data.length;
    this.props.indexChange(index);
   },
   render: function() {
    var buttons = [];
    buttons.push(<span className="carousel_button_prev_next_span" onClick={this.handlePrevClick}><span className="glyphicon glyphicon-chevron-left"></span></span>);
    $.each(this.state.data,function(i, value){
     if (i == this.state.index) {
      buttons.push(<span data-index={i} className="carousel_button_span active_carousel_button" onClick={this.handleClick}></span>);
     }else {
      buttons.push(<span data-index={i} className="carousel_button_span" onClick={this.handleClick}></span>);
     }
     
    }.bind(this));
    buttons.push(<span className="carousel_button_prev_next_span" onClick={this.handleNextClick}><span className="glyphicon glyphicon-chevron-right"></span></span>);
       return <div className="carousel_button_div">{buttons}</div>;
   }
  });
  var CarouselBox = React.createClass({
   getInitialState:function(){
    return {
     index:this.props.index,
     data:this.props.data,
    };
   },
   componentWillReceiveProps: function(props) {
    if (props.index != this.state.index) {
     this.setState({index:props.index});
    }
   },
   render: function() {
    var imgs = [];
    $.each(this.state.data,function(i, value){
     var left;
     var zIndex;
     if (i == this.state.index) {
      left = 0;
      zIndex = 1;
     }else if (i < this.state.index) {
      left = -this.props.width + 10;
      zIndex = 0;
     }else if (i > this.state.index) {
      left = this.props.width - 10;
      zIndex = 0;
     }
     var imgStyle = {
      left:left + "px",
      zIndex:zIndex
     };
     imgs.push(<img src={value.url} alt={value.alt} style={imgStyle} />);
    }.bind(this));
    var divStyle = {
     width:this.props.width + "px",
     height:this.props.height + "px"
    };
       return <div className="carousel_box_div" style={divStyle}>{imgs}</div>;
   }
  });
  var Carousel = React.createClass({
   getInitialState:function(){
    return {
     index:0,
     data:_data,
     timer:null
    };
   },
   componentDidMount:function(){
    this.state.timer = setInterval(function(){
     var index = this.state.index;
     index++;
     index = index % this.state.data.length;
     this.setState({index:index});
    }.bind(this),this.props.delay);
   },
   handleIndexChange:function(newIndex){
    clearInterval(this.state.timer);
    if (newIndex != this.state.index) {
     this.setState({index:newIndex});
    }
    this.state.timer = setInterval(function(){
     var index = this.state.index;
     index++;
     index = index % this.state.data.length;
     this.setState({index:index});
    }.bind(this),this.props.delay);
   },
   render: function() {
    var divStyle = {
     width:this.props.width + "px",
     height:this.props.height + "px"
    };
       return  <div className="carousel_div" style={divStyle}>
          <CarouselBox index={this.state.index} data={this.state.data} width={this.props.width-4} height={this.props.height-4}/>
          <CarouselButton index={this.state.index} data={this.state.data} width={this.props.width} height={this.props.height}
           indexChange={this.handleIndexChange}/>
         </div>; 
   }
  });
  ReactDOM.render(
          <Carousel {...props}/>,
          document.getElementById('carousel_box')
        );
 </script>
</html>
转载于:https://my.oschina.net/fantasyfiend/blog/653923
cihai8773
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习--轮播图组件

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>轮播图</title><linkrel="stylesheet"href="css...
复制链接

扫一扫