React實(shí)現(xiàn)輪播效果
更新時(shí)間：2020年08月25日 11:26:24 作者：越來(lái)越好。
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了React實(shí)現(xiàn)輪播，供大家參考，具體內(nèi)容如下
思路
1、使用全局的state進(jìn)行狀態(tài)管理
2、設(shè)置全局下標(biāo)，對(duì)當(dāng)前的圖片下表進(jìn)行樣式劃分
3、定時(shí)循環(huán)人物便利改變?nèi)窒聵?biāo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
ul{
width: 100%;
text-align: center;
list-style-type: circle;
}
ul>li{
width: 2%;
float: left;
}
img{
width: 100%;
}
</style>
<title>輪播事件</title>
</head>
<body>
<div id="root" style="max-width: 700px;margin: 0 auto;"></div>
</body>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
window.onload=()=>{
class Img extends React.Component{
constructor(props) {
super(props);
this.state={
listImg:[
'./img/banner1.jpg',
'./img/banner2.jpg',
'./img/banner3.jpg',
'./img/banner4.jpg',
'./img/banner5.jpg',
],
index:0
}
}
//計(jì)時(shí)器執(zhí)行
indexChange(){
if(this.state.index == this.state.listImg.length-1){
this.setState({
index:0
})
}else{
// this.state.index++;
this.setState({
index:this.state.index+1
})
console.log(this.state.index);
}
}
componentDidMount(){
setInterval(()=>{
this.indexChange();
},2000)
}
render(){
let {listImg,index} = this.state;
let imgList=listImg.map((item,imgIndex)=>{
return <img src={item} key={imgIndex} style={{'display':index == imgIndex ? 'block' : 'none'}} className='img'/>
})
let liList=listImg.map((item2,imgIndex2)=>{
return <li key={imgIndex2} style={{'listStyleType':index == imgIndex2 ? 'initial' :'circle'}}></li>
})
return (
<div>
{imgList}
<div>
<ul>
{liList}
</ul>
</div>
</div>
)
}
}
ReactDOM.render(
<Img />,
document.getElementById("root")
)
}
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
基于webpack4搭建的react項(xiàng)目框架的方法
本篇文章主要介紹了基于webpack4搭建的react項(xiàng)目框架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂(lè)播放時(shí)間滾動(dòng))
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂(lè)播放使勁按滾動(dòng)),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2024-02-02
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2022-12-12
這篇文章主要介紹了React函數(shù)式組件的性能優(yōu)化思路詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了React Umi國(guó)際化配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04
react PropTypes校驗(yàn)傳遞的值操作示例
這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對(duì)傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
使用hooks寫(xiě)React組件需要注意的5個(gè)地方
這篇文章主要介紹了使用hooks寫(xiě)React組件需要注意的5個(gè)地方，幫助大家更好的理解和學(xué)習(xí)使用React組件，感興趣的朋友可以了解下2021-04-04
React 使用Hooks簡(jiǎn)化受控組件的狀態(tài)綁定
這篇文章主要介紹了React 使用Hooks簡(jiǎn)化受控組件的狀態(tài)綁定，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
react-native android狀態(tài)欄的實(shí)現(xiàn)
這篇文章主要介紹了react-native android狀態(tài)欄的實(shí)現(xiàn)，使?fàn)顟B(tài)欄顏色與App顏色一致，使用戶界面更加整體。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06