[练习4]js学习之图片的水平滚动

来源：互联网发布：淘宝网大衣外套编辑：程序博客网时间：2024/06/03 17:50

<!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{
   width: 67px;
   height: 96px;
  }
  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">
    <table border="0">
     <tr align="middle">
      <td id="firstCol">
       <table border="0">
        <tr>
         <td><img src="img/1.jpg" alt="企鹅"></td>
         <td><img src="img/2.jpg" alt="企鹅"></td>
         <td><img src="img/3.jpg" alt="企鹅"></td>
         <td><img src="img/4.jpg" alt="企鹅"></td>
         <td><img src="img/5.jpg" alt="企鹅"></td>
         <td><img src="img/6.jpg" alt="企鹅"></td>
         <td><img src="img/7.jpg" alt="企鹅"></td>
         <td><img src="img/8.jpg" alt="企鹅"></td>
        </tr>
       </table>
      </td>
      <td id="lastCol"></td>
     </tr>
    </table>
   </div>
  </div>
</div>
<script type="text/javascript">

var stopscroll = false; //设置是否滚动的开关
var scrollContHeight = 95;
var scrollContWidth = 230;
var scrollSpeed = 25;
var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");

var firstCol = document.getElementById("firstCol");
var lastCol = document.getElementById("lastCol");
//复制第一个区域的内容到第二个区域，使画面更连续
lastCol.innerHTML = firstCol.innerHTML;
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.scrollLeft = 0;
  setInterval("scrollLeft()",scrollSpeed);
}
init();
var currLeft = 0;
function scrollLeft(){
  if (stopscroll == true) return;
  currTop = scrollContainer.scrollLeft;
  scrollContainer.scrollLeft +=1;
  if (currTop == scrollContainer.scrollLeft) {
   console.log(currTop + "&&" + scrollContainer.scrollLeft)
   scrollContainer.scrollLeft = 0;
   scrollContainer.scrollLeft += 1;
  }
}
</script>
</body>
</html>

0 0