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

最新推荐文章于 2024-04-25 16:43:08 发布

iteye_19756

最新推荐文章于 2024-04-25 16:43:08 发布

阅读量129

点赞数

文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/iteye_19756/article/details/82407360

版权

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>

iteye_19756

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将别人的图片滚动的例子修改了一下以符合我的要求具有很大的局限性

function mmove(){ clearInterval(move); move = setInterval(moveEvent,30);}function moveEvent(){ mleft--; picList.style.marginLeft = mleft + 'px'; if ( mleft == arr[img.length/2-1...
复制链接

扫一扫