效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0;}
#container{display: flex;}
#carousel-img{width: 50%; height: 280px; overflow: hidden;}
#carousel-img ul{width: 3840px; height: 280px; animation: carousel 5s infinite linear;}
#carousel-img ul li{list-style: none; float: left;}
#carousel-img ul li img{width: 100%; height: 280px;}
@keyframes carousel{from{margin-left: 0px;} to{margin-left: -882px;}}
#carousel-img:hover ul{animation-play-state: paused;/*鼠標滑過時圖片停止*/}
#carousel-img:hover ul li{opacity: .5;/*鼠標劃過時設置透明*/}
#carousel-img ul li:hover{opacity: 1;}
.carousel-words {width:200px; height:300px; overflow:hidden; margin:auto; position:relative; border: 1px solid #bbb5b5;}
@keyframes anis {100% {transform:translateY(-200px)}}
.carousel-item {animation:anis 5s linear infinite; padding: 15px;}
.carousel-item:hover {animation-play-state:paused;}
</style>
</head>
<body>
<div id="container">
<!-- image carousel start -->
<div id="carousel-img">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
</div>
<!-- image carousel end -->
<!-- words carousel start -->
<div class="carousel-words">
<div class="carousel-item">
<p>我愛中國1</p>
<p>我愛中國2</p>
<p>我愛中國3</p>
<p>我愛中國4</p>
<p>我愛中國5</p>
<p>我愛中國6</p>
<p>我愛中國7</p>
<p>我愛中國8</p>
<p>我愛中國9</p>
<p>我愛中國10</p>
<p>我愛中國11</p>
<p>我愛中國12</p>
<p>我愛中國13</p>
<p>我愛中國14</p>
<p>我愛中國15</p>
<p>我愛中國1</p>
<p>我愛中國2</p>
<p>我愛中國3</p>
<p>我愛中國4</p>
<p>我愛中國5</p>
<p>我愛中國6</p>
<p>我愛中國7</p>
<p>我愛中國8</p>
<p>我愛中國9</p>
<p>我愛中國10</p>
<p>我愛中國11</p>
<p>我愛中國12</p>
<p>我愛中國13</p>
<p>我愛中國14</p>
<p>我愛中國15</p>
</div>
</div>
<!-- words carousel end -->
</div>
</body>
</html>