javascript - 如何使两个 div 内联反应
问题描述
// Get a hook function
const {useState, useEffect} = React;
const Slider = props => {
const { innerWidth: width, innerHeight: height } = window;
const urls = [
"https://www.imb.com.au/templates/client/images/header/IMB-logo.svg",
"https://www.mkmcapital.com.au/wp-content/uploads/2016/08/MKM_logo-2.png",
"https://www.pnbank.com.au/Static/Theme/assets/images/pnbank-logo-narrow--7465fe2f1d3e10cf7acfc008991cebef.svg",
"https://www.provident.com.au/images/logo-blue.png",
"https://www.adelaidebank.com.au/globalassets/globalresources/brand-logos/abl-logo.png",
"https://www.amp.com.au/content/dam/amp-au/data/icons/amp-logo-reversed.svg",
"https://www.anz.com.au//content/dam/anzconz/images/common/promopages/logo-promo-anz-small.png",
"https://www.bt.com.au//content/dam/public/btfg-bt/images/logo/bt_financial_group_logo_mob-2x1.png",
"https://www.commbank.com.au/content/dam/commbank/commBank-logo.svg",
"https://www.collinshomeloans.com.au/hs-fs/hubfs/collins-logo-shedow.png?width=230&name=collins-logo-shedow.png",
"https://depositpower.com.au/wp-content/uploads/2019/01/DepositPower_stacked_white.png",
"https://www.latrobefinancial.com.au//Images/Logos/Logo-LTF_v2.jpg",
"https://d2ttwt9gu7swv4.cloudfront.net/assets/images/logo.svg",
"https://www.mebank.com.au/MEBank/Assets/Images/me-logo.svg",
"https://www.nab.com.au//etc/designs/nabrwd/clientlibs/images/logo.png",
"https://www.pepper.com.au//siteassets/logos/pepper-money-logo.png",
"https://www.suncorp.com.au//content/dam/suncorp/corporate/images/logos/Suncorp_New_Logo_2x.png",
"https://www.equifax.com.au/sites/all/themes/vedacorporate/logo.png"
];
let totalWidth = urls.length * 120;
let [ left, setLeft ] = useState(0);
let [ secondLeft, setSecondLeft ] = useState(-(width+300));
useEffect(() => {
const interval = setInterval(() => {
setLeft(left => left + 1);
setSecondLeft(secondLeft => secondLeft + 1);
//console.log('left ' + left + ' sleft ' + secondLeft);
if (left == 0) {
setSecondLeft(-(totalWidth))
}
if(secondLeft == 0){
setLeft(-(totalWidth))
}
}, 5);
return () => {
clearInterval(interval);
};
}, [left, secondLeft]);
return (
<div>
<div
style={{
width: totalWidth + 'px',
whiteSpace: "nowrap",
position: "relative",
top: "0px",
left: left + "px",
float: 'left',
display: 'inline-block'
}}
>
{urls.map((u, i) => {
return (
<div style={{ display: "inline-block", padding: "10px" }}>
<img src={u} width="100px" />
</div>
);
})}
</div>
<div
style={{
width: totalWidth + 'px',
whiteSpace: "nowrap",
position: "relative",
top: "0px",
left: secondLeft + "px",
float: 'right',
display: 'inline-block',
background: '#fff'
}}
>
{urls.map((u, i) => {
return (
<div style={{ display: "inline-block", padding: "10px" }}>
<img src={u} width="100px" />
</div>
);
})}
</div>
</div>
);
};
// Render it
ReactDOM.render(
<Slider/>,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
但我希望它在一条线上。我怎样才能做到这一点
解决方案
用样式来做,如果你想通过 js 来做……用 js 给它样式,但最好用 css 做
display: flex;
flex-wrap: nowrap;
推荐阅读
- sql - 为什么“where”语句似乎过滤了 SAS proc SQL 中的预期行?
- javascript - 上传到 Cloudinary 时如何修复 CORS 阻止错误
- scala - spark scala中Csv文件的匹配列名
- microsoft-dynamics - 如何以正确的方式调试 Dynamics 365 Business Central (Wave2)?
- laravel - 如何使用 laravel-mix-workbox 预缓存静态资产?
- python-3.x - IndexingError:作为索引器提供的不可对齐的布尔系列(布尔系列的索引和索引对象的索引不匹配)
- html - Firefox 中不显示阿拉伯语脚本语言
- mysql - 检查是否仅在身份验证后才授予 MySQL 数据库访问权限
- powerbi - Power BI:计算平均值的最大值
- postgresql - PostgreSQL - 如何使用通用格式将字符串转换为日期