本身寫了一個react輪播圖,最近在學習react但願大神們能指出錯誤或很差的地方。css
效果:
代碼:react
import React, {Component} from 'react'; import './ReactCarousel.css'; class ReactCarousel extends Component{ constructor(){ super(); this.state = { imgs:[ './images/1.png', './images/2.png', './images/3.png', './images/4.png', './images/5.png' ], // 圖片數組 showIndex: 0, //顯示第幾個圖片 timer: null, // 定時器 show: false // 先後按鈕顯示 } } render(){ return ( <div className="ReactCarousel"> <div className="contain" onMouseEnter={()=>{this.stop()}} //鼠標進入中止自動播放 onMouseLeave={()=>{this.start()}} //鼠標退出自動播放 > <ul className="ul"> { this.state.imgs.map((value, index) => { return ( <li className={index === this.state.showIndex ? 'show' : ''} key={index} > <img src={require(value + '')} alt="輪播圖" /> </li> ) }) } </ul> <ul className="dots" style={{width: this.state.imgs.length * 20 + 'px'}}> { this.state.imgs.map((value, index) => { return ( <li key={index} className={index === this.state.showIndex ? 'active' : ''} onClick={()=>{this.change(index)}}> </li>) }) } </ul> <div className="control"> <span className="left" onClick={(e)=>{this.previous(e)}}>左</span> <span className="right" onClick={(e)=>{this.next(e)}}>右</span> </div> </div> </div> ) } componentDidMount(){ //一開始自動播放 this.start(); } componentWillUnmount() { //銷燬前清除定時器 this.stop(); } stop = () => { //暫停 let {timer} = this.state; clearInterval(timer); } start = () => { //開始 let {timer} = this.state; timer = setInterval(() => { this.next(); }, 2000); this.setState({ timer }) } change = (index) => { //點擊下面的按鈕切換當前顯示的圖片 let {showIndex} = this.state; showIndex = index; this.setState({ showIndex }) } previous = (e) => { //上一張 let ev = e || window.event; let {showIndex, imgs} = this.state; if(showIndex <= 0){ showIndex = imgs.length - 1; }else{ showIndex --; } this.setState({ showIndex }) } next = (e) => { //下一張 let ev = e || window.event; let {showIndex, imgs} = this.state; if(showIndex >= imgs.length - 1){ showIndex = 0; }else{ showIndex ++; } this.setState({ showIndex }) } } export default ReactCarousel;
css數組
.contain { position: relative; top: 50%; left: 50%; width: 480px; height: 302px; transition: all .8s; transform: translateX(-50%); color: #fff; overflow: hidden; cursor: pointer; } .contain .ul { height: 100%; list-style: none; } .contain .ul .items { position: absolute; top: 0px; width: 100%; height: 100%; } .ul li.show{ display: block; } .ul li { display: none; } .ul li img { width: 100%; height: 100%; } .contain .dots { position: absolute; left: 50%; bottom: 30px; height: 10px; transform: translateX(-50%); } .dots li { float: left; width: 10px; height: 10px; margin: 0px 5px; border-radius: 50%; transition: all .3s; background-color: antiquewhite; list-style: none; } .dots li.active { background-color: blue; } .control .left { position: absolute; top: 50%; left: 10px; padding: 5px; transform: translateY(-50%); font-size: 20px; cursor: pointer; } .control .left:hover { background-color: rgba($color: #000000, $alpha: 0.3); } .control .right { position: absolute; top: 50%; right: 10px; padding: 5px; transform: translateY(-50%); font-size: 20px; cursor: pointer; } .control .right:hover { background-color: rgba(0, 0, 0, .3); }