DIV+CSS+JS實現圖片無縫滾動代碼

發布時間：2020年06月19日浏覽次數：384 次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"
<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; background-color:#CCCCCC; }
            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="yf2/images/fpcg_img_1.jpg" width="200" height="150" border="0" /> <br /> 1</a></li>
                        <li><a href="#"><img src="yf2/images/fpcg_img_2.jpg" width="200" height="150" border="0" /> <br /> 2</a></li>
                        <li><a href="#"><img src="yf2/images/fpcg_img_3.jpg" width="200" height="150" border="0" /> <br /> 3</a></li>
                        <li><a href="#"><img src="yf2/images/fpcg_img_1.jpg" width="200" height="150" border="0" /> <br /> 4</a></li>
                        <li><a href="#"><img src="yf2/images/fpcg_img_2.jpg" 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; //每次需要移動的距離(lí)（像素）

var MyMar;
var move_yes = false;

var MyRun = setInterval(run, 1000); //每3秒移動一(yī)次

function run(){
      if ( move_yes == false ){
            move_start = 0;
            MyMar = setInterval(Marquee, 1); //連續移動
      }
}

//向左移動函數
function Marquee(){
      if ( move_start < move_end ){ //開(kāi)始移動
            if( tab2.offsetWidth - tab.scrollLeft <= 0 ){
                  tab.scrollLeft -= tab1.offsetWidth-1;
            }else{
                  tab.scrollLeft++;
            }
            move_start++;
            move_yes = true;
      }else{
            clearInterval(MyMar); //移動到指定距離(lí)後停止
            move_yes = false;
      }
}

tab.onmouseover=function() { clearInterval(MyRun); }; //鼠标在層上，則停止運行
tab.onmouseout=function() { MyRun = setInterval(run, 1000)}; //鼠标離(lí)開(kāi)則啓動
</script>
</body>
</html>