JS实现图片不间断滚动

时间：2022-11-16 18:57:20

方法一：

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

 

标签：

相关文章