用JavaScript或JQuery编程实现“try1.jpg”、“try2.jpg”、 “try3.jpg”、“try4.jpg”的轮播“学院新闻”和“通知公告”如图 2 进行设计，当每行文字太多时，超出容器的文字显示为“…”。 图2 7）“通知公告”宽度 308px，高度 280px，右侧有通知时间,时间统一写2022-12-20使用JavaScript，通知标题宽230px 显示在左侧，时间都靠右显示，如图 2 所示。

好的，根据您的描述，我可以给您提供一个使用jQuery实现的“学院新闻”轮播的代码示例，如下所示：

HTML代码：

<div class="news-container">
  <div class="news-tab">
    <div class="tab-item active" data-index="0">try1.jpg</div>
    <div class="tab-item" data-index="1">try2.jpg</div>
    <div class="tab-item" data-index="2">try3.jpg</div>
    <div class="tab-item" data-index="3">try4.jpg</div>
  </div>
  <div class="news-content">
    <div class="news-item active" data-index="0">
      <h3>新闻标题1</h3>
      <p>这是一条新闻内容，当文字太多时，超出容器的文字显示为“…”。</p>
    </div>
    <div class="news-item" data-index="1">
      <h3>新闻标题2</h3>
      <p>这是一条新闻内容，当文字太多时，超出容器的文字显示为“…”。</p>
    </div>
    <div class="news-item" data-index="2">
      <h3>新闻标题3</h3>
      <p>这是一条新闻内容，当文字太多时，超出容器的文字显示为“…”。</p>
    </div>
    <div class="news-item" data-index="3">
      <h3>新闻标题4</h3>
      <p>这是一条新闻内容，当文字太多时，超出容器的文字显示为“…”。</p>
    </div>
  </div>
</div>

CSS代码：

.news-container {
  width: 600px;
  height: 400px;
  position: relative;
  margin: 0 auto;
}
.news-tab {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
.tab-item {
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  margin: 0 10px;
  background-color: #e0e0e0;
  border-radius: 10px;
}
.tab-item.active {
  background-color: #333;
  color: #fff;
}
.news-content {
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.news-item {
  width: 420px;
  height: 340px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  position: absolute;
  top: 30px;
  left: -210px;
  transition: all 0.5s;
}
.news-item.active {
  transform: translateX(0);
  z-index: 1;
}
.news-item.prev {
  transform: translateX(-420px);
}
.news-item.next {
  transform: translateX(420px);
}
.news-item h3 {
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-item p {
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.news-item .time {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 12px;
  color: #666;
}

JavaScript代码：

$(function() {
  var tabItems = $('.tab-item');
  var newsItems = $('.news-item');
  var activeIndex = 0;
  var len = tabItems.length;
  var timer = null;
  
  tabItems.on('click', function() {
    var index = $(this).data('index');
    if (index === activeIndex) {
      return;
    }
    tabItems.removeClass('active');
    $(this).addClass('active');
    newsItems.removeClass('active prev next');
    newsItems.eq(activeIndex).addClass('prev');
    newsItems.eq(index).addClass('active');
    if (index < activeIndex) {
      newsItems.eq(index).addClass('prev');
    } else if (index > activeIndex) {
      newsItems.eq(index).addClass('next');
    }
    activeIndex = index;
  });
  
  function autoPlay() {
    timer = setInterval(function() {
      var index = activeIndex === len - 1 ? 0 : activeIndex + 1;
      tabItems.eq(index).trigger('click');
    }, 3000);
  }
  
  autoPlay();
  
  $('.news-container').hover(function() {
    clearInterval(timer);
  }, function() {
    autoPlay();
  });
});

这段代码实现了一个轮播，点击轮播图下方的小圆点可以切换对应的图片和新闻内容，自动播放功能会在每隔3秒自动切换图片和新闻内容。新闻内容中的标题和内容都有超出容器部分省略的效果，时间也会在右侧靠边显示。您可以根据这段代码进行修改和调整，以实现您的需求。