求个特效。。图片滚动！

可以在火狐 ，ie6，7，8  中都正常的  图片从右向左滚动的代码 ！有的发下 ，谢谢 ！找了好久  可是都不能兼容 ！

解决方案 »

  1.   

    这个可以自定义一个，楼主不知道你喜欢不喜欢jquery，如果可以的话，你可以搜一下，jquery很多是兼容多种浏览器的
      

  2.   

    嗯 ！jquery 兼容性好？
      

  3.   

    网上有很多图片切换的插件的，我之前使用过一个Jquery 插件，slider3
      

  4.   


    index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TinySlider - JavaScript Slideshow</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <div id="wrapper">
    <div>
    <div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
    <div id="slider">
    <ul>
    <li id="content">
    <h1>TinySlider - Simple JavaScript Slideshow</h1>
    <p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
    <p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
    </li>
    <li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
    <li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
    <li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
    </ul>
    </div>
    <div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
    </div>
    <ul id="pagination" class="pagination">
    <li onmouseover="slideshow.pos(0)">1</li>
    <li onmouseover="slideshow.pos(1)">2</li>
    <li onmouseover="slideshow.pos(2)">3</li>
    <li onmouseover="slideshow.pos(3)">4</li>
    </ul>
    </div>
    <script type="text/javascript">
    var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:3,
    resume:true,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0
    });
    </script>
    </body>
    </html>
    script.js  var TINY={};function T$(i){return document.getElementById(i)}
    function T$$(e,p){return p.getElementsByTagName(e)}TINY.slider=function(){
    function slide(n,p){this.n=n; this.init(p)}
    slide.prototype.init=function(p){
    var s=T$(p.id), u=this.u=T$$('ul',s)[0], c=T$$('li',u), l=c.length, i=this.l=this.c=0;
    if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
    this.a=p.auto||0; this.p=p.resume||0; this.v=p.vertical||0; s.style.overflow='hidden';
    for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
    if(this.v){;
    u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
    }else{
    u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
    }
    this.pos(p.position||0,this.a?1:0)
    },
    slide.prototype.auto=function(){
    this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
    },
    slide.prototype.move=function(d,a){
    var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
    },
    slide.prototype.pos=function(p,a){
    clearInterval(this.u.ai); clearInterval(this.u.si);
    var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
    t=this.v?p*this.h:p*this.w, d=t>Math.abs(o)?1:-1; t=t*-1; this.c=p;
    if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==p?this.s:''}}
    this.u.si=setInterval(new Function(this.n+'.slide('+t+','+d+','+a+')'),20)
    },
    slide.prototype.slide=function(t,d,a){
    var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
    if(o==t){
    clearInterval(this.u.si); if(a||(this.a&&this.p)){this.auto()}
    }else{
    var v=o-Math.ceil(Math.abs(t-o)*.15)*d+'px';
    this.v?this.u.style.top=v:this.u.style.left=v
    }
    };
    return{slide:slide}
    }();style.css
         * {margin:0; padding:0}p {line-height:1.4; margin-bottom:12px}
    #wrapper {width:578px; margin:75px auto}.sliderbutton {float:left; width:32px; padding-top:134px}
    .sliderbutton img {cursor:pointer}
    .sliderbutton img:hover {background:#666}
    #slider {float:left; position:relative; overflow:auto; width:500px; height:300px; border:2px solid #fff; background:#fff;}
    #slider ul {position:absolute; list-style:none; top:0; left:0}
    #slider li {float:left; width:500px; height:300px; padding-right:10px}.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px;width:400px}
    .pagination li {float:left; cursor:pointer; padding:1px 5px; background:#fff;border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
    .pagination li:hover {background:#0f0; border:1px solid #bbb; color:#000}
    li.current {border:1px solid #ccc; background:#0f0}li#content {width:464px; height:270px; padding:15px 28px 15px 18px}
    #content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}
      

  5.   

    如果lz是很单纯的让图片滚动，用marquee标签就可以了
    <marquee direction="right">
    <img>
    </marquee>