当前位置:编程学习 > JAVA >>

图片无缝滚动

公司要实现一个客户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>
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,