`

javascriot 图片无缝左右滚动效果

JavaScriptIEHTML 
阅读更多 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）</title>  
</head>  
<body><!--下面是向上滚动代码-->  

<!--下面是向右滚动代码-->  
<a href="javascript:left();">左</a>
<div id="left">
<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;display:none;">  
<table cellpadding="0" cellspacing="0" border="0">  
<tr><td id="jsweb8_cn_right1" valign="top" align="center">  
<table cellpadding="2" cellspacing="0" border="0">  
<tr align="center">  
<td><img src="1.jpg"></td>  
<td><img src="2.jpg"></td>  
<td><img src="3.jpg"></td>  
<td><img src="4.jpg"></td>  
<td><img src="5.jpg"></td>  
</tr>  
</table>  
</td>  
<td id="jsweb8_cn_right2" valign="top"></td>  
</tr>  
</table>  
</div>
<!--下面是向左滚动代码-->  
<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">  
<table cellpadding="0" cellspacing="0" border="0">  
<tr><td id="jsweb8_cn_left1" valign="top" align="center">  
<table cellpadding="2" cellspacing="0" border="0">  
<tr align="center">  
<td><img src="1.jpg"></td>  
<td><img src="2.jpg"></td>  
<td><img src="3.jpg"></td>  
<td><img src="4.jpg"></td>  
<td><img src="5.jpg"></td><td><img src="7.jpg" width="88"></td>  
<td><img src="6.jpg"></td>  
</tr>  
</table>  
</td>  
<td id="jsweb8_cn_left2" valign="top"></td>  
</tr>  
</table>  
</div> 
</div>
<a href="javascript:right();">右</a>
<script>  
var speed=30//速度数值越大速度越慢  
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML  
function Marquee4(){  
if(jsweb8_cn_right.scrollLeft<=0)  
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth  
else{  
jsweb8_cn_right.scrollLeft--  
}  
}  
var MyMar4=setInterval(Marquee4,speed)  
jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}  
jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

////
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML  
function Marquee3(){  
if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)  
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth  
else{  
jsweb8_cn_left.scrollLeft++  
}  
}  
var MyMar3=setInterval(Marquee3,speed)  
jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}  
jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} 
function left(){
    if(document.getElementById('jsweb8_cn_left').style.display=='none'){
		document.getElementById('jsweb8_cn_right').style.display='none';
		document.getElementById('jsweb8_cn_left').style.display='block'
	}
}
function right(){
    if(document.getElementById('jsweb8_cn_right').style.display=='none'){
		document.getElementById('jsweb8_cn_left').style.display='none';
		document.getElementById('jsweb8_cn_right').style.display='block';
	}
}
</script>  
<!--向右滚动代码结束-->  
</body>  
</html>

 

分享到：
| 关于Freemarker生成静态html文件及中文乱码 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics