React版轮播图与普敲原生版轮播图

最新推荐文章于 2024-06-26 17:18:07 发布

愤怒的小火柴人

最新推荐文章于 2024-06-26 17:18:07 发布

阅读量432

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_45856669/article/details/122868411

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

一、代码
- 原生版：
- React版：
二、注意点

一、代码

原生版：

Html+js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
       <ul class="list">
           <li class="item"><img src="./images/1.jpg" alt=""></li>
           <li class="item"><img src="./images/2.jpg" alt=""></li>
           <li class="item"><img src="./images/3.jpg" alt=""></li>
       </ul>
       <button class="btn left"> < </button>
       <button class="btn right"> > </button>
    </div>
</body>
<script>
    var items=document.getElementsByClassName('item')
    var index=0;
    
    var render=function(){
        for(let i=0;i<items.length;i++){
            items[i].className="item"
        }
        items[index].className+=" active"
    }
    render()
    var goNext=function(){
        if(index==items.length-1){
            index=0;
        }
        else index++;
        render()
    }
    var goPre=function(){
        if(index==0){
            index=items.length-1;
        }
        else index--;
        render()
    }
    document.getElementsByClassName('btn left')[0].addEventListener('click',function(){
        goPre()
    })
    document.getElementsByClassName('btn right')[0].addEventListener('click',function(){
        goNext()
    })
</script>
</html>

css:

*{
    padding: 0px;
    margin: 0px;
}
.wrap{
    width: 1200px;
    position: relative;

}
.list{
    width: 1200px;
    height:800px;
    list-style: none;
    position: relative;
}

.item{
    width: 100%;
    height:100%;
    position: absolute;
    z-index: 0;
    top:0px
}
.item img{
    width: 100%;
    height:100%;
}
.list .item.active{
    z-index: 100;
}

.btn.left,.btn.right{
    border: none;
    height: 200px;
    width: 60px;
    background-color: rgba(0, 0,0,0.4);
    color:rgba(255, 255, 255, 0.6);
    position: absolute;
    z-index: 1000;
    font-size: 60px;
    top:50%;
    transform: translateY(-50%);
    transition: all .3s;
}
.btn.right{
    right:0px
}
.btn:hover{
    cursor: pointer;
    background-color: rgba(0, 0,0,0.8);
    color:rgba(255, 255, 255, 1);

}

React版：

import React, { Component } from 'react';
import './App.css';

import img_1 from './images/1.jpg'
import img_2 from './images/2.jpg'
import img_3 from './images/3.jpg'

var imgs = [img_1, img_2, img_3]

class Button extends Component {
  constructor(props){
    super(props)
  }
  render() {
    console.log(this.props)
    // var {_goNext,_goPre}=this.props
    return (
      <div>
        {/* &lt; */}
        <button onClick={()=>this.props._goPre()} className="btn left"> {'<'} </button>
        <button onClick={()=>this.props._goNext()} className="btn right"> &gt; </button>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      index: 0
    }
  }
  _goNext(){
    console.log(this.state.index)
    if(this.state.index==imgs.length-1){
      this.setState({
        index:0
      })
    }
    else{
      this.setState({
        index:++this.state.index,
        
      })
    }
  }
  _goPre(){
    if(this.state.index==0){
      this.setState({
        index:imgs.length-1
      })
    }
    else{
      this.setState({
        index:--this.state.index
      })
    }
  }
  render() {
    var { index } = this.state
    return (
      <div className='wrap'>
        <ul className="list">
          {imgs.map((item, i) => {
            return <li className={`item ${index === i ? 'active' : ''}`} key={i}><img src={item} alt="" /></li>
          })}
        </ul>
        <Button _goNext={()=>{this._goNext()}} _goPre={()=>this._goPre()}></Button>
      </div>
    )
  }
}

export default App;

css文件共用

二、注意点

1.css文件的引入，使用import
在这里插入图片描述
2.图片引入
正常写一个img时使用其src属性引入，但是react项目需要进行打包编译导致浏览器找不到图片位置。
选择import 形式导入，因为是变量，{花括号}

import img_1 from './images/1.jpg'
<img src={img_1} alt="" />

3.class改成className
4.轮播时样式改变技巧
这里选择遍历imgs数组，改变className形式：
首先className={}此处花括号表示这里面是一段js代码，然后使用es6字符串形式，以$开始一个三元运算符判断。
在这里插入图片描述
5.< >符号问题
react中识别‘<>‘为开始结束符，所以需要处理
两种方法：
1）原始码 < >
2） {’<’}