图片滚动效果

系统 1916 0
前段时间写了一个图片滚动的效果,js还没封装,回头在更新。

-------------------
已更新,支持ie了 
贴出来的代码更新了,附件没有更新
-------------------
    
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;
	}
	for(var i=0; i<arr.length;i++){
		if(arr[i] == mleft){
			clearInterval(move);
        setTimeout(mmove, 3000);
        m = 110;
		}
	}
}



    if(document.getElementById('picList')){
	
    var picList = document.getElementById('picList');
    var img = picList.getElementsByTagName('a');
    var mleft = 0;
    var move = setInterval(moveEvent,30);
    var info = picList.innerHTML;
        info += info ;
        picList.innerHTML = info;

    for(var i=0;i<img.length;i++ ){
	    img[i].onmousemove = function(){
		    clearInterval(move);
	    }
	    img[i].onmouseout = function(){
		    setTimeout(mmove,30);
	    }
     }
    var arr = new Array();
	    for ( var i=0; i<img.length/2; i++){
		    arr[i] = -110*i;
	    }
}

  

    
<!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>

  


图片滚动效果


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论