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

简单的marquee标签可以实现文字或图片滚动,但是会有空白,不连续。本文分享两个非常简单,使用JS实现的图片无缝滚动代码。

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

图片无缝滚动实现一

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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月9日 上午10:34
下一篇 2018年2月9日 下午10:29

99%的人还看了以下文章

  • 如何去除导航栏最后一个不需要的分隔线

    网页导航栏制作时,菜单项之间常用1像素细线做分隔,如上图。 给菜单栏菜单项添加分隔线代码如下: /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了,如何处理呢? 去除最后一个菜单项右边的分隔线,代码 /* 移除分隔线 */ .nav li:last-…

    2018年7月26日
    4.2K0
  • 纯css制作简洁的绿色导航菜单

    css制作简洁的绿色导航菜单,代码非常简单,背景颜色和背景图片换下,即可满足大多数导航菜单需要。 导航菜单所需图片素材: 导航菜单HTML代码: <div id=”nav”> <ul> <li><a href=”http://www.125jz.com/”>首页</a></li> &lt…

    2018年2月26日
    2.4K0
  • 带左右箭头控制的网站幻灯片轮播切换效果

    一款比较实用的带左右箭头按钮控制的jquery slider图片插件,网站幻灯片焦点图片轮播切换代码下载。 页面代码非常简洁,适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

    2019年4月10日
    9.7K0
  • 纯CSS制作三级导航菜单

    本文分享如何使用纯CSS制作三级导航菜单,优点:代码简洁,速度快。 HTML代码: <!–代码部分begin www.125jz.com–> <div class=”menu”> <ul class=”nav1″> <li class=”li1″><a href=”http://www.125jz.c…

    2018年8月2日
    2.5K0
  • 纯css实现的三级下拉导航菜单

    非常简洁的一个三级导航菜单,纯css实现,适用于企业产品分类导航等,代码精简,兼容所有浏览器。 See the Pen 纯css实现的三级下拉导航菜单 by 江山如画 (@jgyzhr)on CodePen.

    2019年11月1日
    4.2K0
  • 简单纯js实现的网页tab选项卡切换效果

    今天给大家分享一款非常简单实用的JS网页tab选项卡切换效果,当鼠标放到不同的标签项上或单击该栏目标签会显示不同的内容。

    2018年2月12日
    2.1K0

发表回复

登录后才能评论