使用React创建轮播图（1）框架+自动跳转

使用React创建轮播图（1）框架+自动跳转

---

---

前言

使用js创建轮播图
使用工厂模式封装js轮播图

---

一、目标功能

在本系列的轮播图设计中，首先需要实现的是轮播图的大体框架，并且添加轮播图的基础功能(自动翻页，鼠标区域内暂停）

二、实现方法

与之前使用js写的寻找节点的方法不同，我们在react的render()里渲染元素为DOM

1.创建rander渲染内容

依然是三层内容，注意jsx里面的属性名称应该用小驼峰的写法

    render(){
   
        const left2={
   
            left:this.state.picNo[this.state.No]
        }

        return(
            <div className="big" onMouseOut={
   this.out.bind(this)} onMouseOver={
   this.over.bind(this)}>
                <div className="mid" style={
   left2}>
                    <div className="pic1"> 1 </div>
                    <div className="pic2"> 2 </div>
                    <div className="pic3"> 3 </div>
                    <div className="pic4"> 4 </div>
                </div>
            </div>
        );
    }

2.添加css样式内容