js图片滚动显示五张，鼠标指向图片暂停滚动，显示每秒变化的日期和时间，另一处由下向上滚动图片

可以使用JavaScript实现同时满足以下两个功能：

1. 实现图片滚动显示五张，鼠标指向图片暂停滚动，显示每秒变化的日期和时间；
2. 另一处页面实现由下向上滚动图片。

以下是一种实现方式：

首先，在HTML中创建两个包含图片和日期时间的容器：

<div class="image-container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
  <img src="image5.jpg">
  <div class="datetime"></div>
</div>

<div class="scroll-container">
  <img src="image6.jpg">
  <img src="image7.jpg">
  <img src="image8.jpg">
  <img src="image9.jpg">
  <img src="image10.jpg">
</div>

然后，在CSS中定义两个容器的样式。第一个容器的样式与上一个回答中相同，第二个容器的样式为：

.scroll-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

接下来，在JavaScript中实现第一个容器的滚动和日期时间显示的功能。首先获取第一个容器和所有的图片元素：

var container1 = document.querySelector('.image-container');
var images1 = container1.querySelectorAll('img');

然后定义一个计数器变量来记录当前显示的图片索引，初始值为0：

var currentIndex = 0;

接下来，使用setInterval函数来定时切换图片。在每个定时周期内，将当前显示的图片隐藏，然后显示下一张图片。如果当前已经是最后一张图片，则将计数器重置为0，重新从第一张开始显示。以下是示例代码：

var timer = null;

function startTimer() {
  timer = setInterval(function() {
    images1[currentIndex].classList.remove('active');
    currentIndex++;
    if (currentIndex === images1.length) {
      currentIndex = 0;
    }
    images1[currentIndex].classList.add('active');
  }, 3000);
}

function stopTimer() {
  clearInterval(timer);
}

container1.addEventListener('mouseover', stopTimer);
container1.addEventListener('mouseout', startTimer);

startTimer();

在上述代码中，定义了两个函数startTimer和stopTimer，分别用于启动和停止定时器。在startTimer函数中，使用setInterval函数每隔3秒执行一次匿名函数。每次执行时，将当前显示的图片隐藏，然后显示下一张图片。如果当前已经是最后一张图片，则将计数器重置为0，重新从第一张开始显示。通过给当前显示的图片添加一个"active"类来实现显示和隐藏。在stopTimer函数中，使用clearInterval函数停止定时器。在页面加载完成后，调用startTimer函数启动定时器。同时，使用addEventListener函数为鼠标移入和移出事件添加处理函数，当鼠标移入图片容器时，停止定时器，当鼠标移出图片容器时，重新启动定时器。

接下来，在JavaScript中实现第一个容器的日期时间显示的功能。首先获取日期时间元素：

var datetime = container1.querySelector('.datetime');

然后使用setInterval函数来定时更新日期时间。在每个定时周期内，获取当前日期时间，然后将其显示在页面上。以下是示例代码：

setInterval(function() {
  var now = new Date();
  datetime.textContent = now.toLocaleString();
}, 1000);

在上述代码中，setInterval函数每隔1秒执行一次匿名函数。每次执行时，获取当前日期时间，然后将其显示在页面上。通过调用toLocaleString函数将日期时间转换为本地字符串。

最后，在JavaScript中实现第二个容器的图片滚动功能。首先获取第二个容器和所有的图片元素：

var container2 = document.querySelector('.scroll-container');
var images2 = container2.querySelectorAll('img');

然后定义一个变量来表示当前显示的图片索引，初始值为0：

var currentIndex2 = 0;

接下来，使用setInterval函数来定时滚动图片。首先获取图片容器和所有的图片元素，然后在每个定时周期，将当前显示的图片向上移动一个图片高度，然后将下一张图片显示在容器底部，更新当前显示的图片索引，直到显示完所有图片为止。以下是示例代码：

setInterval(function() {
  container2.scrollTop += images2[currentIndex2].clientHeight;
  currentIndex2++;
  if (currentIndex2 === images2.length) {
    currentIndex2 = 0;
    container2.scrollTop = 0;
  } else {
    container2.scrollTop -= images2[currentIndex2 - 1].clientHeight;
  }
}, 3000);

在上述代码中，setInterval函数每隔3秒执行一次匿名函数。每次执行时，将当前显示的图片向上移动一个图片高度，然后将下一张图片显示在容器底部，更新当前显示的图片索引，直到显示完所有图片为止。通过scrollTop属性来实现滚动。如果当前已经是最后一张图片，则将计数器重置为0，重新从第一张开始显示。在每次切换图片前，需要先将上一张图片的高度从scrollTop属性中减去，使得下一张图片能够显示在容器底部。

以上就是一种实现图片滚动显示五张，鼠标指向图片暂停滚动，显示每秒变化的日期和时间，另一处由下向上滚动图片的方法。你可以根据自己的实际需求进行调整。