chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xxx

Browse Source
This commit is contained in:
chenxuan
2021-06-24 00:07:31 +08:00
parent 9093ce98f8
commit 40a89ffd77
4 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
exercise2/src/App.js
+3 -3
View File
@@ -11,9 +11,9 @@ class App extends React.Component{
componentDidMount(){
setTimeout(()=>{
let images=[
{src:require("./assets/images/banner1.jpg"),url:"https://pages.tmall.com/wow/a/act/tmall/tmc/23759/wupr?spm=875.7931836/B.2016006.d6.66144265aPX4zF&trackInfo=20160815100101;64866506034;287638;587431337429;3;287638_587431337429;1007.14152.68669.100200300000000;92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5;3;0;10000002&item_id=587431337429&pvid=92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5&pos=3&activity_id=287638&wh_pid=industry-170400&acm=07055.1003.1.2519102&scm=1003.1.20160815.OTHER_0_6801489"},
{src:require("./assets/images/banner2.jpg"),url:"https://pages.tmall.com/wow/a/act/tmall/tmc/23759/wupr?spm=875.7931836/B.2016006.d1.66144265aPX4zF&trackInfo=20160815100101;64950842484;288994;530549532317;3;288994_530549532317;1007.14152.68669.100200300000000;92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5;1;0;10000002&item_id=530549532317&pvid=92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5&pos=1&activity_id=288994&wh_pid=industry-170636&acm=07055.1003.1.2519102&scm=1003.1.20160815.OTHER_0_6810849"},
{src:require("./assets/images/banner3.jpg"),url:"https://www.tmall.com/wow/brand/act/fashion?acm=lb-zebra-2386-265936.1003.4.410386&scm=1003.4.lb-zebra-2386-265936.OTHER_1_410386&ali_trackid=19_4803ba43894904cab9c8c08820f2e4a5&spm=875.7931836/B.2016006.d2"}
{src:"https://img.alicdn.com/tps/TB1QyGZLVXXXXa9XVXXXXXXXXXX-1130-500.jpg_q100.jpg_.webp",url:"https://pages.tmall.com/wow/a/act/tmall/tmc/23759/wupr?spm=875.7931836/B.2016006.d6.66144265aPX4zF&trackInfo=20160815100101;64866506034;287638;587431337429;3;287638_587431337429;1007.14152.68669.100200300000000;92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5;3;0;10000002&item_id=587431337429&pvid=92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5&pos=3&activity_id=287638&wh_pid=industry-170400&acm=07055.1003.1.2519102&scm=1003.1.20160815.OTHER_0_6801489"},
{src:"https://img.alicdn.com/tps/i4/i3/6000000003435/O1CN01fS1G4M1bFHA2rvIwi_!!6000000003435-0-ald.jpg_q100.jpg_.webp",url:"https://pages.tmall.com/wow/a/act/tmall/tmc/23759/wupr?spm=875.7931836/B.2016006.d1.66144265aPX4zF&trackInfo=20160815100101;64950842484;288994;530549532317;3;288994_530549532317;1007.14152.68669.100200300000000;92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5;1;0;10000002&item_id=530549532317&pvid=92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5&pos=1&activity_id=288994&wh_pid=industry-170636&acm=07055.1003.1.2519102&scm=1003.1.20160815.OTHER_0_6810849"},
{src:"https://img.alicdn.com/tfs/TB1_1OLxQL0gK0jSZFtXXXQCXXa-1130-500.jpg_q100.jpg_.webp",url:"https://www.tmall.com/wow/brand/act/fashion?acm=lb-zebra-2386-265936.1003.4.410386&scm=1003.4.lb-zebra-2386-265936.OTHER_1_410386&ali_trackid=19_4803ba43894904cab9c8c08820f2e4a5&spm=875.7931836/B.2016006.d2"}
];
this.setState({images:images})
})
exercise2/src/components/swiper/index.js
+44 -7
View File
@@ -10,18 +10,55 @@ export default class Swiper extends React.Component{
this.Data=[];
this.index=0;
}
changeImg=()=>{
changeImg=(index)=>{
this.isInit=false;
this.index=index;
if(this.Data && this.Data.length>0){
for(let i=0;i<this.Data.length;i++){
if(this.Data[i].active){
this.Data[i].active=false;
break;
}
};
this.Data[index].active=true;
this.setState({});
}
}
render(){
this.Data=this.props.data;
if(this.Data && this.Data.length>0 && this.isInit){
for(let i=0;i<this.Data.length;i++){
if(i===1){
this.Data[i].active=true;
}
else {
this.Data[i].active = false;
}
}
}
return(
<div className="myswiper">
<div className="slide">
<a href="">
11111
<img></img>
</a>
{
(this.Data && this.Data.length>0) && this.Data.map((item,index)=>{
return (
<div className={item.active ? "slide show" : "slide"} key={index}>
<a href={item.url} rel="noopener noreferrer" target="_blank">
<img src={item.src} alt=""/>
</a>
</div>
)
})
}
<div className="pagination">
{
(this.Data && this.Data.length>0) && this.Data.map((item,index)=>{
return (
<div className={item.active ? "dot active" :"dot"} key={index} onClick={this.changeImg.bind(this,index)}></div>
)
})
}
</div>
</div>
)
}
exercise2/src/components/swiper/style.css
+41
View File
@@ -1,6 +1,47 @@
.myswiper{
position: relative;
width:1000px;
height: 400px;
margin: 100px auto 0;
border: 1px solid red;
}
.myswiper .slide{
width:100%;
height:100%;
position: absolute;
z-index:1;
left:0px;
top:0px;
opacity:0;
transition:opacity 0.5s;
}
.myswiper .slide.show{
opacity: 1;
z-index: 2;
}
.myswiper .slide img{
width:100%;
height:100%;
border:0 none;
}
.myswiper .pagination{
width:auto;
height:auto;
position: absolute;
z-index: 3;
left:50%;
bottom:8%;
transform: translateX(-50%);
}
.myswiper .pagination .dot{
width:30px;
height:8px;
background-color:rgba(0,0,0,0.8);
cursor:pointer;
display: inline-block;
margin-left:2.5px;
margin-right:2.5px;
}
.myswiper .pagination .dot.active{
background-color:rgba(255,255,255,0.8)
}
project/p8/src/components/swiper/index.js
+1 -1
View File
@@ -22,7 +22,7 @@ export default class Swiper extends React.Component{
}
}
this.aData[index].active=true;
this.setState({});
// this.setState({});
}
}