列表向上下滚动形式的轮播图总结1

 

第一种：

js写法：使得列表无缝衔接自动循环并且当鼠标放到列表上，列表停止滚动。

先看效果图：

代码： 

import React from 'react'
import axios from '@services'
import './EnterpriseModel.less'
// import modelpoint1 from '../../../assets/images/EnterpriseModel/model1.png'
// import modelpoint2 from '../../../assets/images/EnterpriseModel/model2.png'

export default class EnterpriseModel extends React.Component {
  state = {
    listdata: []
  }
  getData = () => {
    axios.post('/Xxxx/xxxxxxx').then(res => {
      if (res.code === 200) {
        let listdata = []
        console.log('res.data', res.data)
        listdata.push({ modelTotal: res.data?.modelTotal, modelResultTotal: res.data?.modelResultTotal, modelvalues: res.data?.values })
        this.setState({
          listdata
        })
      }
    })
  }
  componentDidMount () {
    this.getData()
    function fresh () {
      if (location.href.indexOf('?reload=true') < 0) {
        location.href += '?reload=true'
      }
    }
    setTimeout(fresh(), 50)
    // let oldOnload = window.onload
    if (typeof window.onload === 'object') {
      console.log('jjj', typeof window.onload)
    } else {
      console.log('jjj', typeof window.onload)
    }
    window.onload = function () {
      console.log('xianshi', 111)
      // setTimeout(function () { location.reload() }, 1000)
      let modelList = document.getElementById('modelList')
      let modelListone = document.getElementById('modelListone')
      let modelListtwo = document.getElementById('modelListtwo')
      modelListtwo.innerHTML = modelListone.innerHTML
      function scrollUp () {
        if (modelList.scrollTop >= modelListone.offsetHeight) {
          modelList.scrollTop = 0
        } else {
          modelList.scrollTop++
        }
      }
      let time = 100
      let mytimer = setInterval(scrollUp, time)
      modelList.onmouseover = function () {
        clearInterval(mytimer)
      }
      modelList.onmouseout = function () {
        mytimer = setInterval(scrollUp, time)
      }
    }
  }
  render () {
    const { listdata } = this.state
    console.log('listdata', listdata.length !== 0 ? listdata[0].modelvalues : 2)
    return (
      <div className='model-model'>
        <div className='modelNumber'>
          <div className='modelone'>
            <div className='modelNum'>模型总数</div>
            <div className='modelNone'>{listdata.length !== 0 ? listdata[0].modelTotal : null}</div>
          </div>
          <div className='modelResultNumber'>
            <div className='modelNumb'>模型结果总数</div>
            <div className='modelNtwo'>{listdata.length !== 0 ? listdata[0].modelResultTotal : null}</div>
          </div>
        </div>
        {listdata.length !== 0 ? <div id='modelList'>
          <ul id='modelListone'>{
            listdata[0].modelvalues.map((item, index) => {
              return (
                <div>{
                  index % 2 === 0 ? <div className='modelitemAll' key={index}>
                    <li className='modelitem'>
                      <div className='modelitemname'>{item.qymc.length >= 16 ? item.qymc.slice(0, 16) : item.qymc}</div>
                      <div className='modelitemnametwo'>{item.modelName.length >= 16 ? item.modelName.slice(0, 16) : item.modelName}</div>
                    </li>
                  </div> : <div className='modelitemAll1' key={index}>
                    <li className='modelitem'>
                      <div className='modelitemname'>{item.qymc.length >= 16 ? item.qymc.slice(0, 16) : item.qymc}</div>
                      <div className='modelitemnametwo'>{item.modelName.length >= 16 ? item.modelName.slice(0, 16) : item.modelName}</div>
                    </li></div>
                }</div>
              )
            })
          }</ul>
          {listdata[0].modelvalues.length >= 8 ? <ul id='modelListtwo' style={
  { marginTop: (listdata[0].modelvalues.length - 7) * 34 }}/> : <ul id='modelListtwo'/>}
        </div> : null}

      </div>
    )
  }
}

样式和下面的一致去除掉css3中的样式。 

第二种：

css3动画版：利用动画形式使得列表滚动并且将鼠标至于列表上列表就暂停，但是目前我不会写形成无缝衔接列表。

先看效果图：

 

代码：

import React from 'react'
import axios from '@services'
// import { Carousel } from 'antd'
import './EnterpriseModel.less'

export default class EnterpriseModel extends React.Component {
  // 初始化数据
  state = {
    listdata: []
  }

  componentDidMount () {
    // 获取数据
    this.getData()
  }

  getData = () => {
    axios.post('/Xxxx/xxxxxxx').then(res => {
      if (res.code === 200) {
        let listdata = res.data
        this.setState({
          listdata
        })
      }
    })
  }

  render () {
    const { listdata } = this.state
    return (
      <div className='model-model'>
        {/* 标题总数 */}
        <div className='modelNumber'>
          <div className='modelone'>
            <div className='modelNum'>模型总数</div>
            <div className='modelNone'>{listdata.length !== 0 ? listdata.modelTotal : null}</div>
          </div>
          <div className='modelResultNumber'>
            <div className='modelNumb'>模型结果总数</div>
            <div className='modelNtwo'>{listdata.length !== 0 ? listdata.modelResultTotal : null}</div>
          </div>
        </div>
        {/* 列表轮播样式 */}
        <div>
          {listdata.length !== 0 ? <div id='modelList'>
            <ul id='modelListone'>{
              listdata.values.map((item, index) => {