两个非常简单的JS图片无缝滚动代码

江山如画 • 2018年2月9日上午11:30 • 网页特效 • 阅读 3297

图片无缝滚动实现一

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片无缝滚动代码|www.125jz.com</title>
<style>
.picutre{overflow: hidden; height: 150px; width: 800px; margin: 0 auto;}
.picutre img{width:200px; height:150px; border:0px;}
</style>
</head>
<body>
<div id="list" class=" picutre">
<table  style="width: 680px; border: 0px;">
   <tr>
   <td id="list1">
       <table  cellpadding="0" cellspacing="0">
       <tr id="pic">
       <td><img src="1.jpg" /></td>
       <td><img src="1.jpg" /></td>
       <td><img src="1.jpg" /></td>
       <td><img src="1.jpg" /></td>
       <td><img src="1.jpg" /></td>
       </tr>
       </table>
   </td>
   <td id="list2"></td>
   </tr>
</table>
</div>
<script type="text/javascript">
/*图片滚动效果*/
var speedpic = 20;//速度数值越大速度越慢
document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
function Marqueepic() {
if (document.getElementById("list2").offsetWidth- document.getElementById("list").scrollLeft <= 0) {
  document.getElementById("list").scrollLeft -= document.getElementById("list1").offsetWidth;
} else {  document.getElementById("list").scrollLeft++; }
}
var MyMarpic = setInterval(Marqueepic, speedpic);
document.getElementById("list").onmouseover = function() {
clearInterval(MyMarpic);
}
document.getElementById("list").onmouseout = function() {
MyMarpic = setInterval(Marqueepic, speedpic);
}
</script>
</body>
</html>

图片无缝滚动实现二

<style>
#demo img{ width:180px; height:125px; border:0px;}
</style>

<div id=demo style="OVERFLOW: hidden; WIDTH: 720px; HEIGHT: 125px">
  <table  align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td id=demo1 vAlign=top>
  <table width="720" height="125" bordercolor="#FFFFFF">
  <tr>
  <!----- 滚动图片区域 开始----->
  <td> <img src="1.jpg"></td>
  <td> <img src="1.jpg"></td>
  <td> <img src="1.jpg"></td>
  <td> <img src="1.jpg"></td>
  <td> <img src="1.jpg"></td>
  <!----- 滚动图片区域 结束----->
  </tr>
  </table>
  </td>
  <td width="1" id=demo2></td>

  <SCRIPT> 
        var speed1=15//数值越大速度越慢
        demo2.innerHTML=demo1.innerHTML 
function Marquee1(){ 
   if(demo2.offsetWidth-demo.scrollLeft<=0) 
   demo.scrollLeft-=demo1.offsetWidth 
   else{    demo.scrollLeft++  } 
    } 
        var MyMar1=setInterval(Marquee1,speed1) 
        demo.onmouseover=function() {clearInterval(MyMar1)} 
        demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)} 
  </SCRIPT>
  </tr>
  </table>
  </div>

本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/1181.html