ibigbug/imageScroll.html

## imageScroll.html
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>imageScroll</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        function $(e) { return document.getElementById(e); }
        function $t(e) { return document.getElementsByTagName(e); }

        var slider = {
            startTimer: function(){
                timer= setInterval(slider.scrollLeft, 50);
            },
            stopTimer: function(){
                clearInterval(timer);
            },
            paint: function() {
                with(document) { body.style.textAlign = 'center'; }
                var t = document.createElement('div');
                t.id = 'outerDiv';
                document.body.insertBefore(t,$t('script')[0]);
                var box = $('outerDiv');
                box.style.width = '300px';
                box.style.height = '300px';
                box.style.margin = '0 auto';
                box.style.overflow = 'hidden';
                box.style.position = 'relative';
                var imgList = [];
                for (var i=0; i<3; i++)
                {
                    t = document.createElement('img');
                    t.id = 'image'+i;
                    t.src = 'img/' + (i+1) + '.jpg';
                    t.style.width = '300px';
                    t.style.height = '300px';
                    t.style.cssFloat = 'left';
                    t.style.top = 0;
                    imgList.push(t);
                }
                var inner = document.createElement('div');
                inner.id = 'innerDiv';
                inner.style.position = 'absolute';
                inner.style.left = '0';
                inner.style.width = '900px';
                for (var i=0; i<imgList.length; i++)
                {
                    inner.appendChild(imgList[i]);
                }
                $('outerDiv').appendChild(inner);
                return this; //注意这里
            },
            scrollLeft: function(){
                var t = $('innerDiv').style.left;
                $('innerDiv').style.left = parseInt(t) - 5 + 'px';
                if (Math.abs(parseInt(t))>300){
                    slider.stopTimer();
                    var r = $t('img')[0].parentNode.removeChild($t('img')[0]);
                    //$('innerDiv').style.left = '-5px';//用来修正边界的跳跃
                    $('innerDiv').appendChild(r);
                    setTimeout(slider.startTimer, 500);
                }
            },
        }
        slider.paint().startTimer();
    </script>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>imageScroll</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	function $(e) { return document.getElementById(e); }
	function $t(e) { return document.getElementsByTagName(e); }

	var slider = {
	startTimer: function(){
	timer= setInterval(slider.scrollLeft, 50);
	},
	stopTimer: function(){
	clearInterval(timer);
	},
	paint: function() {
	with(document) { body.style.textAlign = 'center'; }
	var t = document.createElement('div');
	t.id = 'outerDiv';
	document.body.insertBefore(t,$t('script')[0]);
	var box = $('outerDiv');
	box.style.width = '300px';
	box.style.height = '300px';
	box.style.margin = '0 auto';
	box.style.overflow = 'hidden';
	box.style.position = 'relative';
	var imgList = [];
	for (var i=0; i<3; i++)
	{
	t = document.createElement('img');
	t.id = 'image'+i;
	t.src = 'img/' + (i+1) + '.jpg';
	t.style.width = '300px';
	t.style.height = '300px';
	t.style.cssFloat = 'left';
	t.style.top = 0;
	imgList.push(t);
	}
	var inner = document.createElement('div');
	inner.id = 'innerDiv';
	inner.style.position = 'absolute';
	inner.style.left = '0';
	inner.style.width = '900px';
	for (var i=0; i<imgList.length; i++)
	{
	inner.appendChild(imgList[i]);
	}
	$('outerDiv').appendChild(inner);
	return this; //注意这里
	},
	scrollLeft: function(){
	var t = $('innerDiv').style.left;
	$('innerDiv').style.left = parseInt(t) - 5 + 'px';
	if (Math.abs(parseInt(t))>300){
	slider.stopTimer();
	var r = $t('img')[0].parentNode.removeChild($t('img')[0]);
	//$('innerDiv').style.left = '-5px';//用来修正边界的跳跃
	$('innerDiv').appendChild(r);
	setTimeout(slider.startTimer, 500);
	}
	},
	}
	slider.paint().startTimer();
	</script>
	</html>