首页 > 代码库 > 图片无缝滚动
图片无缝滚动
<html>
<head>
<meta charset="utf-8"/>
//css部分
<style type="text/css">
ul,li,html,body{
margin:0;
padding:0;
}
li{
list-style:none;
}
img{
border:0;
}
#move-main{
width:1200px;
height:236px;
margin-left:auto;
margin-right:auto;
margin-top:60px;
position:relative;
border:1px solid red;
overflow:hidden;
}
#move-list li{
float:left;
height:236px;
width:180px;
margin-right:10px;
margin-left:10px;
}
#move-list{
position:absolute;
left:0;
top;0;
height:236px;
}
#move-list li img{
height:236px;
width:180px;
}
#left-move,#right-move{
display:block;
width:30px;
height:30px;
position:absolute;
top:50%;
margin-top:-22px;
}
#left-move{
left:0;
border-radius:50%;
background:url("img/14642.gif") no-repeat center center;
}
#right-move{
right:0;
border-radius:50%;
background:url("img/15032.gif") no-repeat center center;
}
#left-move:hover{
background:url("img/17674.gif") no-repeat center center;
}
#right-move:hover{
background:url("img/30626.gif") no-repeat center center;
}
</style>
</head>
<body>
div部分
<div id="move-main">
<ul id="move-list">
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/a.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/b.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/c.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/d.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/e.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/f.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/g.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/h.jpg" /></a></li>
</ul>
<a href="javascript:;" id="left-move"></a>
<a href="javascript:;" id="right-move"></a>
</div>
js部分
<script type="text/javascript">
function have(id){
return document.getElementById(id);
}
var main=have("move-main");
var list=have("move-list");
var leftmove=have("left-move");
var rightmove=have("right-move");
var listli=list.getElementsByTagName("li");
list.innerHTML+=list.innerHTML;//让list里面的内容增加一倍
list.style.width=listli.length*(listli[0].offsetWidth+20)+"px";
function close(obj){
clearInterval(obj.timer);
}
leftmove.onmouseout=function(){
close(list);
}
rightmove.onmouseout=function(){
close(list);
}
function move(obj,pos,mop,moda,dir){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.style[pos]=obj[mop]+dir+"px";
if(obj[mop]<-obj[moda]/2){
obj.style[pos]=0+"px";
}
if(obj[mop]>0){
obj.style[pos]=-obj[moda]/2+"px";
}
},60)
}
leftmove.onmouseover=function(){
move(list,‘left‘,‘offsetLeft‘,‘offsetWidth‘,10);
}
rightmove.onmouseover=function(){
move(list,‘left‘,‘offsetLeft‘,‘offsetWidth‘,-10);
}
//匀速运动：speed的值保持不变
//变速运动：speed的值随时间而变化
//offsetWidth：默认宽度
//offset:默认
</script>
</body>
</html>
注：图片自己添加即可，不会添加的朋友可以将图片和html文件放在同一文件夹，然后将图片命名与上面相同即可
图片无缝滚动