<style type="text/css">
 	.marquee{width: 300px;height: 200px;overflow: hidden;border: 1px solid #ddd;}
 	.marqueeLeft{width: 800px;height: 200px;overflow: hidden;}
 	.marqueeLeft ul{white-space: nowrap;}
 	.marqueeLeft ul li{display: inline-block;}
</style>
<div class="marquee" id="parent">
	<ul id="list">
<li>
	<h4 class="title">滚动标题</h4>
	<div class="course-list f16">
<p><a href="" target="_blank">前端知识体系</a></p>
<p><a href="" target="_blank">前端知识结构</a></p>
<p><a href="" target="_blank">Web前端开发大系概览</a></p>
<p><a href="" target="_blank">Web前端开发大系概览-中文版</a></p>
<p><a href="" target="_blank">Web Front-end Stack v2.2</a></p>
<p><a href="" target="_blank">前端书籍</a></p>
<p><a href="" target="_blank">前端免费书籍大全</a></p>
	</div>
</li>
<li>
	<h4 class="title">测试标题1</h4>
	<div class="course-list f16">
<p><a href="" target="_blank">前端入门教程</a></p>
<p><a href="" target="_blank">瘳雪峰的Javascript教程</a></p>
<p><a href="" target="_blank">jQuery基础教程</a></p>
<p><a href="" target="_blank">前端工程师必备的PS技能——切图篇</a></p>
<p><a href="" target="_blank">结合个人经历总结的前端入门方法</a></p>
	</div>
</li>
<li>
	<h4 class="title">测试标题2</h4>
	<div class="course-list f16">
<p><a href="" target="_blank">css sprite 雪碧图制作</a></p>
<p><a href="" target="_blank">版本控制入门 – 搬进 Github</a></p>
<p><a href="" target="_blank">Grunt-beginner前端自动化工具</a></p>
	</div>
</li>
	</ul>
	<ul id="list1"></ul>
</div>

<div class="marqueeLeft" id="leftParent">
	<ul id="listLeft">
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
	</ul>
	<ul id="listLeft1"></ul>
</div>
<script type="text/javascript">
	marqueeUp("parent","list","list1",40)
	function marqueeUp(a,b,c,d){
let parent = document.getElementById(a);
let child1 = document.getElementById(b);
let child2 = document.getElementById(c);
child2.innerHTML = child1.innerHTML;
let timer = setInterval(function() {
	if(parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
	} else {
parent.scrollTop++;
	}
}, d);
parent.onmouseenter = function() {
	clearTimeout(timer)
}
parent.onmouseleave = function() {
	marqueeUp("parent","list","list1",40)
}
	}
	
	marqueeLeft("leftParent","listLeft","listLeft1",40)
	function marqueeLeft(a,b,c,d){
let parent = document.getElementById(a);
let child1 = document.getElementById(b);
let child2 = document.getElementById(c);
child2.innerHTML = child1.innerHTML;
let timer = setInterval(function() {
	if(child2.offsetWidth-parent.scrollLeft<=0)
parent.scrollLeft-=child1.offsetWidth
	else{
parent.scrollLeft++;
	}
}, d);
parent.onmouseenter = function() {
	clearTimeout(timer)
}
parent.onmouseleave = function() {
	marqueeLeft("leftParent","listLeft","listLeft1",40)
}
	}
	

</script>