[练习3]js学习之图片的竖直滚动

最新推荐文章于 2023-03-29 15:50:04 发布

beiyuxinke

最新推荐文章于 2023-03-29 15:50:04 发布

阅读量449

点赞数

分类专栏：技术文章标签： js DHTML

本文链接：https://blog.csdn.net/beiyuxinke/article/details/51058799

版权

技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE <!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title></title>
<style type="text/css">
  body{
   font-size: 12px;
   font-family: 'Mirosoft YaHei','微软雅黑','SimSun','宋体';
   background: #FFFFFF;
   margin: 0px;
   padding: 0px;
   text-align: center;
   color: #000000;
  }
  img{
   display: block;
   width: 220px;
   height: 70px;
   margin: 5px 0px;
  }
  div.news_root{
   width: 255px;
   height: 134px;
   text-align: left;
   margin: 0 auto;
   background: url(images/bg_news.gif);
   background-repeat: no-repeat;
  }
  div.news_header{
   width: 243px;
   height: 16px;
   vertical-align: top;
   text-align: left;
   font-size: 14px;
   padding: 6px;
  }
  #scrollContainer{
   width: 245px;
   margin: 2px 5px;
   overflow: hidden;/*这里是滚动的关键，将超出边框的部分隐藏，造成了滚动的效果*/
   text-align: left;
  }
</style>
</head>
<body>
<div class="news_root">
  <div class="news_header">Headliner</div>
  <div id="scrollContainer">
   <div id="scrollContent">
    <img src="img/1.jpg" alt="企鹅">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
    <img src="img/6.jpg">
    <img src="img/7.jpg">
    <img src="img/8.jpg">
   </div>
  </div>
</div>
<script type="text/javascript">

var stopscroll = false; //设置是否滚动的开关
var scrollContHeight = 200;
var scrollContWidth = 230;
var scrollSpeed = 25;
var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");
do{
scrollContainer.appendChild(scrollContent.cloneNode(true));
}while(scrollContainer.offsetHeight < scrollContHeight);//强制运行一次，复制一次内容到容器中，使滚动看起来更连贯

scrollContainer.style.width = scrollContWidth + "px";
scrollContainer.style.height = scrollContHeight + "px";
scrollContainer.noWrap = true;

scrollContainer.onmouseover = new Function("stopscroll=true");
scrollContainer.onmouseout = new Function("stopscroll=false");
function init () {
  // body...
  scrollContainer.scrollTop = 0;
  setInterval("scrollUp()",scrollSpeed);
}
init();
var currTop = 0;
function scrollUp(){
  if (stopscroll == true) return;
  currTop = scrollContainer.scrollTop;
  scrollContainer.scrollTop +=1;
  if (currTop == scrollContainer.scrollTop) {
   console.log(currTop + "&&" + scrollContainer.scrollTop)
   scrollContainer.scrollTop = 0;
   scrollContainer.scrollTop += 1;
  }
}
</script>
</body>
</html>