码迷,mamicode.com
首页 > 其他好文 > 详细

图片无缝滚动

时间:2016-11-08 16:33:03      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:oda   main   href   tin   no-repeat   isp   block   get   img   

<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="#"><img src="a.jpg" /></a></li>
<li><a href="#"><img src="b.jpg" /></a></li>
<li><a href="#"><img src="c.jpg" /></a></li>
<li><a href="#"><img src="d.jpg" /></a></li>
<li><a href="#"><img src="e.jpg" /></a></li>
<li><a href="#"><img src="f.jpg" /></a></li>
<li><a href="#"><img src="g.jpg" /></a></li>
<li><a href="#"><img src="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文件放在同一文件夹,然后将图片命名与上面相同即可

图片无缝滚动

标签:oda   main   href   tin   no-repeat   isp   block   get   img   

原文地址:http://www.cnblogs.com/66CCFFLXY/p/6043143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!