JS實現圖片不間斷滾動

本文轉載自查看原文 2017-04-16 22:50 3601 圖片不間斷滾動

方法一：

<!DOCTYPE html>
<html>
　　<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<style type="text/css">
　　　　*{
　　　　　　margin: 0px;
　　　　　　padding: 0px;
　　　　}
　　　　#outside{
　　　　　　width: 1200px;
　　　　　　overflow: hidden;
　　　　　　margin: 0 auto;
　　　　　　height: 300px;
　　　　}

　　　　#outside #inside{
　　　　　　width: 3100px;
　　　　}

　　　　#outside #inside div{
　　　　　　width: 300px;
　　　　　　height: 300px;
　　　　　　margin: 0px 5px;
　　　　　　background-color: red;
　　　　　　float: left;
　　　　}

　　</style>

</head>

<body>

　　<div id="outside">
　　　　<div id="inside">
　　　　　　<div>1</div>
　　　　　　<div>2</div>
　　　　　　<div>3</div>
　　　　　　<div>4</div>
　　　　　　<div>5</div>
　　　　　　<div>6</div>

　　　　　　<div>1</div>
　　　　　　<div>2</div>
　　　　　　<div>3</div>
　　　　　　<div>4</div>
　　　　</div>
　　</div>

</body>
</html>

<script type="text/javascript">

var num = 0;

var inside = document.getElementById("inside");
　　setInterval(function(){
　　num-=1;
　　inside.style.marginLeft = num+"px";

　　console.log(inside.style.marginLeft);

　　if(num<=-1860){
　　　　num = 0;
　　}
},1);

</script>

方法二：

<!DOCTYPE html>
<html>
　　<head>
　　<meta charset="UTF-8">
　　<title></title>

　　<style type="text/css">
　　　　#outside{
　　　　　　width: 800px;
　　　　　　height: 200px;
　　　　　　overflow: hidden;
　　　　} 
　　　　#div{
　　　　　　width: 1000000px;
　　　　}
　　　　#div1,#div2{
　　　　　　width: auto;
　　　　　　float: left;
　　　　}
　　　　img{
　　　　　　width: 200px;
　　　　　　height: 200px;
　　　　}
　　</style>


</head>
<body>
　　<div id="outside">
　　　　<div id="div">
　　　　　　<div id="div1">
　　　　　　　　<img src="../img/2017-03-14_124354.png" />
　　　　　　　　<img src="../img/2017-03-14_124422.png"/>
　　　　　　　　<img src="../img/2017-03-14_124708.png"/>
　　　　　　　　<img src="../img/2017-03-14_131608.png"/>
　　　　　　</div>
　　　　　　<div id="div2"></div>
　　　　</div>
　　</div>

<script type="text/javascript">

　　var outside=document.getElementById("outside");
　　var div1=document.getElementById("div1");
　　var div2=document.getElementById("div2");

　　div2.innerHTML=div1.innerHTML;

　　var gunDong=setInterval(function(){
　　　　if(div2.offsetWidth-outside.scrollLeft<=0) { 
　　　　　　outside.scrollLeft-=div1.offsetWidth 
　　　　}else{ 
　　　　　　outside.scrollLeft++; 
　　　　} 
　　},10)

//.offsetWidth 是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變
//.scrollLeft 代表頁面利用滾動條滾動到右側時，隱藏在滾動條左側的頁面的寬度

　　outside.onmouseover=function() { 
　　　　clearInterval(gunDong); //鼠標放上滾動停止
　　}
　　outside.onmouseout=function() {//鼠標移開繼續滾動
　　　　gunDong=setInterval(function(){
　　　　　　if(div2.offsetWidth-outside.scrollLeft<=0) { 
　　　　　　　　outside.scrollLeft-=div1.offsetWidth 
　　　　　　}else{ 
　　　　　　　　outside.scrollLeft++; 
　　　　　　} 
　　　　},10)
　　}

</script>


</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現圖片的不間斷連續滾動橫向不間斷滾動DIV 不間斷循環滾動代碼 jQuery模擬百度新聞不間斷滾動效果，支持文字、圖片水平垂直滾動 DIV+CSS圖片不間斷滾動jquery特效(Marquee插件)及移動標簽marquee整理 js實現文字無間斷左右滾動和圖片左右滾動 js實現文字無間斷上下滾動 Android AlarmManager實現不間斷輪詢服務不間斷打印dmesg 不間斷重啟springboot項目