<!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>
2016-11-27
把兩個ul用position:absolute的方式進行排列， 就可以實現(xiàn)， 具體你自己操作一下。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<div id="con">
? ?<ul id="con1">
? ? ? <li><img src="pic.jpg" width="269" height="210" /></li>
? ? ? <li><img src="pic1.jpg" width="269" height="210"/></li>
? ? ? <li><img src="pic2.jpg" width="269" height="210" /></li>
? ? ? <li><img src="pic3.jpg" width="269" height="210" /></li>
? ?</ul>
? ?<ul id="con2"></ul>
</div>
<script>
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>
2015-12-10
可以用定位去實現(xiàn)。