图片新闻的无限滚动_前端新闻数据自动滚动炫酷一点的-CSDN博客

本文链接：https://blog.csdn.net/dawn0718/article/details/8291480

　　上个星期开始接触JavaScript，看了JavaScript说明，感觉挺灵活的，缺点是调试太麻烦了，我昨天晚上下载了Editplus来写脚本还可以。
　　下面是昨天晚上写的图片新闻的无限滚动，网络上的都是定义好了具体的图像个数，而我的这个稍加改动就可以不限制图像，后面再丰富它。
　　今天看了一些网页游戏，准备学习一下练手。

<html>
<head><title>图片新闻的无限滚动</title>
<style type=text/css>
#DemoWin{width:600;height:500;background=\'#\'" 100 auto;overflow:hidden}
    .DemoPic{width:300;height:300;position:absolute;top:50;overflow:hidden;clear:both;}
    #DemoPic0{left:0;background:#123;z-index:999}
    #DemoPic1{left:300;background:#456}
    #DemoPic2{left:600;background:#789}
    img{width:400;height:300;}
</style>    
<script language="JavaScript">
    var ScrollStr;

function init(){
        ScrollStr="012";
        ReadyDiv();
    }

    function ReadyDiv(){
        for(var i=0;i<3;i++){
            var DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(i,i+1)).style;
            DivTemp.xpos=(i-1)*300;
            DivTemp.left=DivTemp.xpos+'px';         
        }
}

    function ScrollPicToLeft(){
        DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(0,1)).style;
        DivTemp.left=600+'px';
        ScrollStr=ScrollStr.substring(1,3)+ScrollStr.substring(0,1);

        for(var i=0;i<300;i=i+100){
          for(var k=0;k<3;k++){
            DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(k,k+1)).style;
            DivTemp.xpos=parseInt(DivTemp.left)
            DivTemp.xpos=DivTemp.xpos - i;
            DivTemp.left=DivTemp.xpos+'px';           
          }
        }        
    }

    function ScrollPicToRight(){
        for(var i=0;i<300;i=i+100){
          for(var k=0;k<3;k++){
            DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(k,k+1)).style;
            DivTemp.xpos=parseInt(DivTemp.left)
            DivTemp.xpos=DivTemp.xpos + i;
            DivTemp.left=DivTemp.xpos+'px';           
          }
        }
        DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(2,3)).style;
        DivTemp.left=-300+'px';
        ScrollStr=ScrollStr.substring(2,3)+ScrollStr.substring(0,2);
    }
</script>
</head>
<body onLoad="init()">
<a href=\'#\'"  onMouseDown="ScrollPicToLeft()" onMouseUp="javascript:void(null)" onMouseOut="javascript:void(null)">向左移动</a>
<a href=\'#\'" onMouseDown="ScrollPicToRight()" onMouseUp="javascript:void(null)" onMouseOut="javascript:void(null)">向右移动</a>
<div id=DemoWin>
    <div class="DemoPic" id=DemoPic0><img src="1.jpg"/></div>
    <div class="DemoPic" id=DemoPic1><img src="2.jpg"/></div>
    <div class="DemoPic" id=DemoPic2><img src="3.jpg"/></div>
</div>
</body>
</html>