<div class="company_flex"> <div class="con1"> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区翠屏社区卫生服务中心 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区朝阳社区卫生服务中心 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区蒲家中心卫生院 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区翠屏社区卫生服务中心 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区罗江中心卫生院 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 汶川县人民医院体检中心 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区翠屏社区卫生服务中心 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 达州市通川区罗江中心卫生院 </div> <div class="company_box"> <img src="./Images/index_07xxxhdpi.png"> 汶川县人民医院体检中心 </div> </div> <div class="con2"></div> </div>
CSS:
.company .company_flex{ width: 100%; height: 144px; overflow: hidden; } .company .company_flex .con1,.con2{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 1%; } .company .company_flex .company_box { min-width: 30%; display: flex; align-items: center; margin-top: 25px; } .company .company_flex .company_box img { width: 35px; height: 35px; margin-right: 20px; }
js:
var area = document.getElementsByClassName("company_flex"); console.log('area',area) var con1 = document.getElementsByClassName("con1") ; var con2 = document.getElementsByClassName("con2") ; console.log(con1) con2[0].innerHTML = con1[0].innerHTML; function scrollUp() { console.log(area[0].scrollTop) if (area[0].scrollTop >= con1[0].offsetHeight) { area[0].scrollTop = 0; } else { area[0].scrollTop++ } } var time = 50; var mytimer = setInterval(scrollUp, time); area.onmouseover = function () { clearInterval(mytimer); } area.onmouseout = function () { mytimer = setInterval(scrollUp, time); }