公司要实现一个客户LOGO图片滚动的效果,下面是实现的源码,分享一下
<style>
#outer {overflow: hidden;
}
img {
height: 100p;
width: 130px;
}
ul {
list-style: none
}
li {
float: left;
}
#inner01, #inner02 {
float: left;
}
</style>
<script type="text/javascript" >
$(function(){
var outer = $("#outer");
var inner01= $("#inner01");
var inner02= $("#inner02");
inner02.html(inner01.html());
function que(){
//alert(outer.scrollLeft() +" "+ inner01.width());
if(outer.scrollLeft()>=inner01.width()){
//alert(outer.scrollLeft() +" "+ inner01.width());
outer.scrollLeft(0);
}
else{
outer.scrollLeft(outer.scrollLeft()+1);
}
}
setInterval(que,10);
})
</script>
</head>
<body>
<div id="outer">
<div style="width:33333px;">
<div id="inner01">
<ul>
<li><img src="images/product_miniimg_01.png" /></li>
<li><img src="images/product_miniimg_02.png" /></li>
<li><img src="images/product_miniimg_03.png" /></li>
<li><img src="images/product_miniimg_04.png" /></li>
<li><img src="images/product_miniimg_05.png" /></li>
</ul>
</div>
<div id="inner02"> </div>
</div>
</div>
</body>
</html>