                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

图片不能向左滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片向左无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#area {
width:600px;
height: 200px;
border: 1px solid #ccc;
margin-left: 200px;
margin-top:100px;
overflow: hidden;
}
#box1{
width: 800px;
}
#area ul li{
float: left;
list-style: none;
width: 200px;
}
</style>
</head>
<body>
<div id="area">
<ul id="box1">
<li><i><img src="images/1.jpg" alt="头像"></i></li>
<li><i><img src="images/2.jpg" alt="头像"></i></li>
<li><i><img src="images/3.jpg" alt="头像"></i></li>
<li><i><img src="images/4.jpg" alt="头像"></i></li>
<li><i><img src="images/5.jpg" alt="头像"></i></li>
<li><i><img src="images/6.jpg" alt="头像"></i></li>
</ul>
<ul id="box2"></ul>
</div>
<script type="text/javascript">
window.onload=function(){
var area=document.getElementById('area');
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var time=50;
var timer=setInterval('move()',time);
box2.innerHTML=box1.innerHTML;
area.onmouseover=function(){
clearInterval(timer);
}
area.onmouseout=function(){
timer=setInterval('move()',time);
}
}
function move(){
if(box1.scrollLeft>=area.offsetWidth){
box1.scrollLeft=0;
}else{
box1.scrollLeft++;
}
}
</script>
</body>
</html>

天然呆小姐

2015-12-06

源自：信息滚动效果制作 2-3

关注问题我要回答

519

操作

收起

2 回答

rainy_li3676598
2016-11-27

把两个ul用position:absolute的方式进行排列，就可以实现，具体你自己操作一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js图片滚动效果制作</title>

<style>

* { padding:0; margin:0;}

ul,li,ol { list-style:none}

#con{

width:800px; height:220px; margin:50px auto; padding:10px;

border:1px solid #666;

overflow:hidden; position:relative;

}

ul { width:1100px;}

#con1 { position:absolute;}

#con2 { position:absolute; left:1100px;}

li{

list-style:none;

float:left;

margin-right:5px;

}

</style>

</head>

<body>

</ul>

</div>

var con = document.getElementById('con');

var con1 = document.getElementById('con1');

var con2 = document.getElementById('con2');

var speed = 10;

con.scrollLeft = 0;

con2.innerHTML = con1.innerHTML;

function scrollLeft(){

if(con.scrollLeft >= con1.scrollWidth) {

con.scrollLeft = 0;

}else{

con.scrollLeft ++;

}

var myScroll = setInterval("scrollLeft()",speed);

con.onmouseover=function(){

clearInterval(myScroll);

}

con.onmouseout=function(){

myScroll = setInterval("scrollLeft()",speed);

}

</script>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

李晓健
2015-12-10

可以用定位去实现。

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

信息滚动效果制作

参与学习 47753 人
解答问题 321 个

萌妹子带您快速学习滚动效果，掌握无缝滚动和歇间性滚动的制作方法

进入课程

图片不能向左滚动

我要回答关注问题

热搜

最近搜索清空

图片不能向左滚动

2 回答

图片不能向左滚动