将别人的图片滚动的例子修改了一下以符合我的要求具有很大的局限性 -

heisalittlebird

浏览: 20147 次

最近访客更多访客>>

jacket233

alexqiu_hz

zpit7360

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (28)

社区版块

存档分类

将别人的图片滚动的例子修改了一下以符合我的要求具有很大的局限性

function mmove()
{
	clearInterval(move);
	move = setInterval(moveEvent,30);
}

function moveEvent()
{
	mleft--;
	picList.style.marginLeft = mleft + 'px';
	if ( mleft == arr[img.length/2-1]-110)
	{
		mleft=0;
	}
	if(arr.indexOf(mleft) >=0)
	{
		j = arr.indexOf(mleft);
		aTag.href = a[j].href;
	    aPic.src = img[j].src;
		clearInterval(move);
		setTimeout(mmove,3000);
	}
}

if(document.getElementById('picList'))
{
	
	var j = 0;
    var picList = document.getElementById('picList');
    var a = picList.getElementsByTagName('a');
    var img = picList.getElementsByTagName('img');
    var mleft = 0;
    var move = setInterval(moveEvent,30);
    var info = picList.innerHTML;
    	info += info ;
    	picList.innerHTML = info;
    var aTag = document.getElementById('aTag');
    var aPic = document.getElementById('aPic');
    for(var i = 0;i<img.length;i++)
    {
		img[i].onmousemove = function()
		{
		    var z = Math.ceil((-mleft+event.x-110)/110)-1;
		    alert(z);
		    aTag.href = a[z].href;
		    aPic.src = img[z].src;
		    clearInterval(move);
		};
		img[i].onmouseout = function()
		{
			setTimeout(mmove,30);
		};
     }
    var arr = new Array();
	for ( var k=0; k<img.length/2; k++)
	{
		arr[k] = -110*k;
	}
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style>
			#picView { width:330px; margin-left:100px; height:110px; overflow:hidden;}
			#picList { width:1320px; height:110px;}
			#picView img { width:100px; width:100px; margin:5px; border:0; }
			#picView a { width:110px; height:110px; float:left;}
		</style>
		
    </head>
    <body>
        <div id="picView">
        	<div id="picList">
        		<a href="#"><img src="images/1.jpg" /></a>
				<a href="#"><img src="images/2.jpg" /></a>
				<a href="#"><img src="images/3.jpg" /></a>
				<a href="#"><img src="images/4.jpg" /></a>
				<a href="#"><img src="images/5.jpg" /></a>
				<a href="#"><img src="images/6.jpg" /></a>
        	</div>
        </div>
		
    </body>
	<script src="js/picMove.js" type="text/javascript" ></script>
</html>

分享到：