Simple Rollover[jQuery]

HTML

<div id="rollover" class="rollover">
    <p><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" class="rollover_view" alt="image1" width="415" height="295"></p>
    <ul class="thumb">
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li>
    </ul>
</div>
<div id="rollover2" class="rollover">
    <p><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" class="rollover_view" alt="image1" width="415" height="295"></p>
    <ul class="thumb">
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li>
        <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li>
        <li><a href="#"><img...

CSS

ul,li{ padding:0;margin:0; }
.rollover {
    height:295px;
    width:580px;
    margin:10px 0;
}
.rollover p {
    float:left;
    margin:0;
    position:relative;
}
.rollover .rollover_view {
    position:absolute;
    top:0;
    left:0;
}
.rollover ul {
    float:right;
    width:150px;
    list-style:none;
}
.rollover li {
    height:50px;
}
.rollover a img {
    border:0;
}

JavaScript

/**
 * Simple Rollover[jQuery]
 * @author Tenderfeel([email protected])
 * @ver 1.0
 * @HOME http://tenderfeel.xsrv.jp/javascript/271/
 * @license The MIT License
 */
(function($) {
    $.extend($.fn,{
        simpleRollover:function(options) {
            var settings = {
                viewImg: '.rollover_view',
                regrep:'_thumb',
                delay:500
            };
            $.extend( settings, options );
            
            return this.each(function() {
                var prev = $(this).find(settings.viewImg);
                var thumbs = $(this).find('img[src*='+settings.regrep+']');
                var newimg = [];
                var next = $('<img>');
                var zi = prev.parent().css('z-index');
                
                next.appendTo(prev.parent());
                var current = 'prev';
                thumbs.each(function(i, el){
                    newimg[i] = new Image();
                    newimg[i].src = el.src;
                    var src = el.src.replace(settings.regrep, "");
                    $(el).hover(
                        function(e){
                            if(current === 'prev'){
                                next.attr('src',src);
                                next.css('z-index', zi++);
                                prev.css('z-index', zi);
                                next.fadeIn(settings.delay,function(){
                                current = 'next';
                                prev.hide();
                                });
                            }else if(current==='next'){
                                prev.attr('src',src);
                                prev.css('z-index', zi++);
                                next.css('z-index', zi);
                                prev.fadeIn(settings.delay,function(){
                                current = 'prev';
                                next.hide();
                                });
                   ...