您的位置: 首页  >  IT文章  >  将别人的图片滚动的例子修改了一上以符合小弟我的要求 具有很大的局限性

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

分类: IT文章 • 2024-04-11 19:04:52
将别人的图片滚动的例子修改了一下以符合我的要求 具有很大的局限性

 

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>
 

 

相关推荐