【图片无缝滚动】这样的效果谁有，麻烦大家贡献一下哦

我想弄一个如下图的效果，朋友们谁有的麻烦贴出来一下
<ul>
<li><a href="#"><img width="130px" height="80px" src="http://y1.ifengimg.com/af0a411b01107b98/2012/0302/rdn_4f5087d57bd2d.jpg" /></a></li>
<li><a href="#"><img width="130px" height="80px"  src="http://y0.ifengimg.com/c1348d133ef1161c/2012/0223/rdn_4f45ff850b781.jpg" /></a></li>
<li><a href="#"><img width="130px" height="80px"  src="http://y0.ifengimg.com/c1348d133ef1161c/2012/0223/rdn_4f45fd43da1b5.jpg" /></a></li>
<li><a href="#"><img width="130px" height="80px"  src="http://y3.ifengimg.com/c1348d133ef1161c/2012/0215/rdn_4f3b677a87006.jpg" /></a></li>
</ul>

解决方案 »

  1.   

    看不到你的图
    你看看这个行不行?http://www.codefans.net/jscss/code/1801.shtml
      

  2.   

    http://code.usuishi.com/Web/DemoView.aspx?DemoID=13
    这个可不可以?
      

  3.   

    <html>
    <head>
    <style type="text/css">
    image{width:93px;height:130px;margin:5px 0px}
    body{font:12px 宋体,Verdana,Arial,Helvetica,sans-serif;background:#ffffff;margin:0;padding:0;text-align:center;color:#000000;}
    div.div_header{width:243px;height:16px;vertical-align:top;text-align:left;font-size:14px;padding:10px 5px 5px 15px;}
    div.div_top_root{margin:50px 0 0 60px;width:325px;height:178px;background:url(image/image02.gif);background-repeat:no-repeat;}
    #scrollContainer{margin-left:10pt;margin-top:2pt;overflow:hidden;text-align:left;}
    #bigpic{width:300px;height:400px;margin-left:100px}
    </style>
    </head>
    <body onmouseover="closeAllSubItem(event)">
    <div class="div_top_root">
    <div class="div_header">今日电影</div>
    <div id="scrollContainer">
    <div id="scrollContent">
    <table cellspacing="0" cellpadding="5" border="0">
    <tr align="middle">
    <td><div id="image1" onmouseover="displaybigpic(this);"><image src="image/h1.jpg"/></div></td>
    <td><div id="image2" onmouseover="displaybigpic(this);"><image src="image/h2.jpg"/></div></td>
    <td><div id="image3" onmouseover="displaybigpic(this);"><image src="image/h3.jpg"/></div></td>
    <td><div id="image4" onmouseover="displaybigpic(this);"><image src="image/h4.jpg"/></div></td>
    <td><div id="image5" onmouseover="displaybigpic(this);"><image src="image/h5.jpg"/></div></td>
    <td><div id="image6" onmouseover="displaybigpic(this);"><image src="image/h6.jpg"/></div></td>
    <td><div id="image7" onmouseover="displaybigpic(this);"><image src="image/h7.jpg"/></div></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    <div id="bigpic"></div>
    <script type="text/javascript" language="javascript">
    var stopscroll  = false;
    var scrollContHeight  = 135;
    var scrollContWidth   = 300;
    var scrollSpeed  = 55;
    var scrollContainer =document.getElementById("scrollContainer");
    var scrollContent =document.getElementById("scrollContent");
    /*do{
    scrollContainer.appendChild(scrollContent.cloneNode(true));//
    }while(scrollContainer.offsetHeight<scrollContHeight);*/
    scrollContainer.style.width = scrollContWidth +"px";
    scrollContainer.style.height = scrollContHeight +"px";
    scrollContainer.noWrap = true;//无缝滚动scrollContainer.onmouseover = new Function("stopscroll=true;");
    scrollContainer.onmouseout = new Function("stopscroll=false;");function init(){
    scrollContainer.scrollLeft =0;
    setInterval("scrollUp()",scrollSpeed);
    }
    init();
    var currLeft =0;//
    function scrollUp(){
    if(stopscroll == true)return;
    currLeft = scrollContainer.scrollLeft;
    scrollContainer.scrollLeft+=1;//每次上移一个像素
    if(currLeft == scrollContainer.scrollLeft){ scrollContainer.scrollLeft = 0;
    scrollContainer.scrollLeft += 1;
    }
    }
    //处理大图出现var bigpicture1 = '<img src="image/conan1.jpg" width="300" height="400"/>';
    var bigpicture2 = '<img src="image/conan2.jpg" width="300" height="400"/>';
    var bigpicture3 = '<img src="image/conan3.jpg" width="300" height="400"/>';
    var bigpicture4 = '<img src="image/conan4.jpg" width="300" height="400"/>';
    var bigpicture5 = '<img src="image/conan5.jpg" width="300" height="400"/>';
    var bigpicture6 = '<img src="image/conan1.jpg" width="300" height="400"/>';
    var bigpicture7 = '<img src="image/conan2.jpg" width="300" height="400"/>';
    function displaybigpic(obj){
    var bigPic = document.getElementById("bigpic");
    var picIndex = obj.getAttribute("id").toString().substring(5);
    bigPic.innerHTML = eval("bigpicture"+picIndex);
    }
    function closeAllSubItem(event){
    var scopeY = {top:50,bot:224};
    window.status = event.clientY;
    if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){

    var bigPic = document.getElementById("bigpic");
    bigPic.innerHTML = "";
    }

    }</script>
    </body>
    </html>