调试易

http://flowplayer.org/tools/demos/scrollable/index.html
jquery tools

37个新鲜的jQuery图像显示解决方案  这里有...
http://apps.hi.baidu.com/share/detail/272683

用jquery 吧 这个东西都帮你写好了的
http://www.websbook.com/javascript/15gsyjQuerysxtphdpxgdJSym_15134.html
看下这个.里面有楼主要的效果..希望可以帮到楼主

function slide(src,link,text,target,attr,desc) { 
this.desc = desc 
this.src = src; 
this.link = link; 
this.text = text; 
this.target = target; 
this.attr = attr; 
if (document.images) { 
this.image = new Image(); 
} 
this.loaded = false; 
this.load = function() { 
if (!document.images) { return; } if (!this.loaded) { 
this.image.src = this.src; 
this.loaded = true; 
} 
} 
this.hotlink = function() { 
var mywindow; 
if (!this.link) return; 
if (this.target) { 
if (this.attr) { 
mywindow = window.open(this.link, this.target, this.attr); } else { 
mywindow = window.open(this.link, this.target); 
} 
if (mywindow && mywindow.focus) mywindow.focus(); } else { 
location.href = this.link; 
} 
} 
} 
function slideshow( slideshowname ) { 
this.name = slideshowname; 
this.repeat = true; 
this.prefetch = -1; 
this.image; 
this.textid; 
this.textarea; 
this.timeout = 5000; 
this.slides = new Array(); 
this.current = 0; 
this.timeoutid = 0; 
this.add_slide = function(slide) { 
var i = this.slides.length; 
if (this.prefetch == -1) { 
slide.load(); 
} this.slides[i] = slide; 
} 
this.play = function(timeout) { 
this.pause(); 
if (timeout) { 
this.timeout = timeout; 
} 
if (typeof this.slides[ this.current ].timeout != 'undefined') { 
timeout = this.slides[ this.current ].timeout; 
} else { 
timeout = this.timeout; 
} 
this.timeoutid = setTimeout( this.name + ".loop()", timeout); 
} 
this.pause = function() { 
if (this.timeoutid != 0) { clearTimeout(this.timeoutid); 
this.timeoutid = 0; } 
} 
this.update = function() { 
if (! this.valid_image()) { return; } 
if (typeof this.pre_update_hook == 'function') { 
this.pre_update_hook(); 
} 
var slide = this.slides[ this.current ]; 
var dofilter = false; 
if (this.image && 
typeof this.image.filters != 'undefined' && 
typeof this.image.filters[0] != 'undefined') { 
dofilter = true; } 
slide.load(); 
if (dofilter) { 
if (slide.filter && 
this.image.style && 
this.image.style.filter) { 
this.image.style.filter = slide.filter; 
} 
this.image.filters[0].Apply(); 
} 
this.image.src = slide.image.src; 
if (dofilter) { 
this.image.filters[0].Play(); 
} 
this.display_text(); 
if (typeof this.post_update_hook == 'function') { 
this.post_update_hook(); 
} 
if (this.prefetch > 0) { var next, prev, count; 
next = this.current; 
prev = this.current; 
count = 0; 
do { 
if (++next >= this.slides.length) next = 0; 
if (--prev < 0) prev = this.slides.length - 1; 
this.slides[next].load(); 
this.slides[prev].load(); 
} while (++count < this.prefetch); 
} 
} 
this.goto_slide = function(n) { 
if (n == -1) { 
n = this.slides.length - 1; 
} 
if (n < this.slides.length && n >= 0) { 
this.current = n; 
} 
this.update(); 
} 
this.goto_random_slide = function(include_current) { 
var i; 
if (this.slides.length > 1) { 
do { 
i = Math.floor(Math.random()*this.slides.length); 
} while (i == this.current); 
this.goto_slide(i); 
} 
} 
this.next = function() { 
if (this.current < this.slides.length - 1) { 
this.current++; 
} else if (this.repeat) { 
this.current = 0; 
} 
this.update(); 
} 
this.previous = function() { 
if (this.current > 0) { 
this.current--; 
} else if (this.repeat) { 
this.current = this.slides.length - 1; 
} 
this.update(); 
} 
this.shuffle = function() { 
var i, i2, slides_copy, slides_randomized; 
slides_copy = new Array(); 
for (i = 0; i < this.slides.length; i++) { 
slides_copy[i] = this.slides[i]; 
} 
slides_randomized = new Array(); 
do { 
i = Math.floor(Math.random()*slides_copy.length); 
slides_randomized[ slides_randomized.length ] = 
slides_copy[i]; 
for (i2 = i + 1; i2 < slides_copy.length; i2++) { 
slides_copy[i2 - 1] = slides_copy[i2]; 
} 
slides_copy.length--; 
} while (slides_copy.length); 
this.slides = slides_randomized; 
} 
this.get_text = function() { 
return(this.slides[ this.current ].text); 
} 
this.get_all_text = function(before_slide, after_slide) { 
all_text = ""; 
for (i=0; i < this.slides.length; i++) { 
slide = this.slides[i]; 
if (slide.text) { 
all_text += before_slide + slide.text + after_slide; 
} 
} 
return(all_text); 
} 
this.display_text = function(text) { 
if (!text) { 
text = this.slides[ this.current ].text; 
} 
if (this.textarea && typeof this.textarea.value != 'undefined') { 
this.textarea.value = text; 
} 
if (this.textid) { 
r = this.getElementById(this.textid); 
if (!r) { return false; } 
if (typeof r.innerHTML == 'undefined') { return false; } 
r.innerHTML = text; 
} 
} 
this.hotlink = function() { 
this.slides[ this.current ].hotlink(); 
} 
this.save_position = function(cookiename) { 
if (!cookiename) { 
cookiename = this.name + '_slideshow'; 
} 
document.cookie = cookiename + '=' + this.current; 
} 
this.restore_position = function(cookiename) { 
if (!cookiename) { 
cookiename = this.name + '_slideshow'; 
} 
var search = cookiename + "="; 
if (document.cookie.length > 0) { 
offset = document.cookie.indexOf(search); 
if (offset != -1) { 
offset += search.length; 
end = document.cookie.indexOf(";", offset); 
if (end == -1) end = document.cookie.length; 
this.current = parseInt(unescape(document.cookie.substring(offset, end))); 
} 
} 
} 
this.noscript = function() { 
$html = "\n"; 
for (i=0; i < this.slides.length; i++) { 
slide = this.slides[i]; 
$html += '<P>'; 
if (slide.link) { 
$html += '<a href="' + slide.link + '">'; 
} 
$html += '<img src="' + slide.src + '" ALT="slideshow image">'; 
if (slide.link) { 
$html += "<\/a>"; 
} 
if (slide.text) { 
$html += "<BR>\n" + slide.text; 
} 
$html += "<\/P>" + "\n\n"; 
} 
$html = $html.replace(/\&/g, "&" ); 
$html = $html.replace(/</g, "<" ); 
$html = $html.replace(/>/g, ">" ); 
return('<pre>' + $html + '</pre>'); 
} 
this.loop = function() { 
if (this.current < this.slides.length - 1) { 
next_slide = this.slides[this.current + 1]; 
if (next_slide.image.complete == null || next_slide.image.complete) { 
this.next(); 
} 
} else { 
this.next(); 
} 
this.play( ); 
} 
this.valid_image = function() { 
if (!this.image){ 
return false; 
} 
else { 
return true; 
} 
} 
this.getElementById = function(element_id) { 
if (document.getElementById) { 
return document.getElementById(element_id); 
} 
else if (document.all) { 
return document.all[element_id]; 
} 
else if (document.layers) { 
return document.layers[element_id]; 
} else { 
return undefined; 
} 
} 
this.set_image = function(imageobject) { 
if (!document.images) 
return; 
this.image = imageobject; 
} 
this.set_textarea = function(textareaobject) { 
this.textarea = textareaobject; 
this.display_text(); 
} 
this.set_textid = function(textidstr) { 
this.textid = textidstr; 
this.display_text(); 
} 
}详细出处参考：http://www.jb51.net/article/15144.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html>   
    <head>   
        <title>tab.html</title>   
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
        <meta http-equiv="description" content="this is my page">   
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
        <style type="text/css">   
            .subject {   
                border: 1px solid black;   
                width: 200px;   
                height: 200px;   
            }   
        </style>   
        <script type="text/javascript">   
        var imgAry = new Array();   
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");   
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");   
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");   
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");   
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");   
           
        window.onload = function () {   
            var oBox = document.getElementById("subjectBox");   
            var oShowId = document.getElementById("showId").value;   
            var subjectHtml = "";   
            for (var i = 1; i <= 4; i++) {   
                if (i == oShowId) {   
                    subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"  
                } else {   
                    subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"  
                }   
            }   
            oBox.innerHTML = subjectHtml;   
            showSubject2("next");   
        };   
           
        function setHide() {   
            var allDiv = document.getElementsByName("showDiv");   
            for (var i = 0; i < allDiv.length; i++) {   
                if (allDiv[i].style.display != "none") {   
                    allDiv[i].style.display = "none";   
                }   
            }   
        }   
                   
           
        //方法一：   
        function showSubject(flag) {   
            var oShowId = document.getElementById("showId").value;   
            var allDiv = document.getElementsByName("showDiv");   
            var len = allDiv.length;   
            //alert(oShowId + ":" + len);   
            setHide();//隐藏所有div   
            if (flag == "next") {   
                oShowId = eval(oShowId) + 1;   
                if (oShowId > len) {   
                    oShowId = 1;   
                }   
                document.getElementById("div_" + oShowId).style.display = "block";   
            } else {   
                oShowId = eval(oShowId) - 1;   
                if (oShowId < 1) {   
                    oShowId = len;   
                }   
                document.getElementById("div_" + oShowId).style.display = "block";   
            }   
            document.getElementById("showId").value = oShowId;   
        }   
           
        //方法二：   
        function showSubject2(flag) {   
            var allDiv = document.getElementsByName("showDiv");   
            for (var i = 0, len = allDiv.length; i < len; i++) {   
                if (allDiv[i].style.display == "block") {   
                    allDiv[i].style.display = "none";   
                    if (flag == "next") {   
                        if (i < len) {   
                            i += 1;   
                        }   
                        if (i >= len) {   
                            i = 0;   
                        }   
                    } else {   
                        if (i > 0) {   
                            i -= 1;   
                        }   
                        if (i <= 0) {   
                            i = len - 1;   
                        }   
                    }   
                    allDiv[i].style.display = "block";   
                    break;   
                }   
            }   
            setTimeout("showSubject2('next')", 1000);//动态更换图片   
        }   
    </script>   
    </head>   
  
    <body>   
        方法1：   
        <input type="button" value="上" onclick="showSubject('prev')" />   
        <input type="button" value="下" onclick="showSubject('next')" />   
        <input type="hidden" id="showId" value="1" />   
        <br />   
        方法2：   
        <input type="button" value="上" onclick="showSubject2('prev')" />   
        <input type="button" value="下" onclick="showSubject2('next')" />   
        <div id="subjectBox">   
        </div>   
    </body>   
</html>  
至于 大图 小图 改变布局方式 要三张布局即可 中间的图片高度宽度改变下
可以用jquery插件，比较好用本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx