DIV+CSS+JS实现图片无缝滚动代码

发布时间：2020年07月15日浏览次数：743 次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV+CSS+JS实现图片无缝滚动代码</title>
<style type="text/css">
#demo { width:615px; border:1px #ddd solid; overflow:hidden; }
      #indemo { float:left; width:800%; }
            #demo1 { float:left; margin:0; padding:0; display:table; }
            #demo2 { float:left; margin:0; padding:0; display:table; }
            ul{ list-style-type:none; list-style-position:outside; margin:0; padding:0; overflow: hidden; }
                  li { list-style-type:none; float:left; width:200px; height:180px; margin:0; margin-right:5px; padding:0; overflow:hidden; }
                        a { width:100%; line-height:30px; text-align:center; display:block; }
</style>
</head>
<body>
<div id="demo">
      <div id="indemo">
            <div id="demo1">
                  <ul>
                        <li><a href="#"><img src="" width="200" height="150" border="0" /> <br /> 1</a></li>
                        <li><a href="#"><img src="" width="200" height="150" border="0" /> <br /> 2</a></li>
                        <li><a href="#"><img src="" width="200" height="150" border="0" /> <br /> 3</a></li>
                        <li><a href="#"><img src="" width="200" height="150" border="0" /> <br /> 4</a></li>
                        <li><a href="#"><img src="" width="200" height="150" border="0" /> <br /> 5</a></li>
                  </ul>
            </div>
            <div id="demo2"></div>
      </div>
</div>
<script>
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //复制tab1的内容到tab2

var move_start = 0; //初始化
var move_end = 205; //每次需要移动的距离（像素）

var MyMar;
var move_yes = false;

var MyRun = setInterval(run, 3000); //每3秒移动一次

function run(){
      if ( move_yes == false ){
            move_start = 0;
            MyMar = setInterval(Marquee, 10); //连续移动
      }
}

//向左移动函数
function Marquee(){
      if ( move_start < move_end ){ //开始移动
            if( tab2.offsetWidth - tab.scrollLeft <= 0 ){
                  tab.scrollLeft -= tab1.offsetWidth-1;
            }else{
                  tab.scrollLeft++;
            }
            move_start++;
            move_yes = true;
      }else{
            clearInterval(MyMar); //移动到指定距离后停止
            move_yes = false;
      }
}

tab.onmouseover=function() { clearInterval(MyRun); }; //鼠标在层上，则停止运行
tab.onmouseout=function() { MyRun = setInterval(run, 3000)}; //鼠标离开则启动
</script>
</body>
</html>

免责声明：本站相关技术文章信息部分来自网络，目的主要是传播更多信息，如果您认为本站的某些信息侵犯了您的版权，请与我们联系，我们会即时妥善的处理，谢谢合作！