Javascript 在实现复杂的jQuery图像滑块时卡住

我在修改滑块时卡住了一些地方

在这里，缩略图和主显示图像具有一对一的关系，即通过单击一个缩略图，它将显示一个图像，然后滑动到下一个缩略图并显示其关联的图像，依此类推

现在，我想修改此滑块，使一个缩略图与多个图像关联/链接，即一个缩略图与多个主显示图像的关系为一对多

i、 e点击“卧室缩略图”，如附图所示，它应该只显示和幻灯片5或n个与此特定缩略图相关的图像，然后以相同的方式，如果我单击“浴室缩略图”，它应该显示和幻灯片5或n个与此特定部分相关的图像，依此类推。这就是我想要修改代码的方式，从一个到一个[一个缩略图到一个主显示图像]到一个到多个[一个缩略图到-5或n个与特定缩略图相关的图像]

我修改的缩略图部分的HTML代码是相同的

我修改了主图像部分，如图所示

<div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;">
<div class="preload"><div></div></div>
<div class="lof-main-outer" style="width:670px; height:236px;">
<ul class="lof-main-wapper">
    <li>
        <ul class=”lof-main-subwapper”>
                    <li>
 <img src="images/slider1.jpg" title="Newsflash 2" >           
                        <div class="lof-main-item-desc">
                        <h3>Innovation</h3>
<h2>lorem ipsum is simply dummy text</h2>
                        </div>
                    </li>
                     <li>
                         ..
                     </li>
         </ul>
     </li>
     <li>
        <ul class=”lof-main-subwapper”>
            <li>
                …
            </li>
            <li>
                …
            </li>
        </ul>
    </li>
</ul>
</div>
</div>

我正在修改滑块的脚本代码，到目前为止，我已经添加了另一个wrappersub类&我在将图像组链接到一个缩略图时卡住了，即将主图像部分的ul链接到缩略图的li

 (function($) {
 $.fn.lofJSidernews = function( settings ) {
    return this.each(function() {
        // get instance of the lofSiderNew.
        new  $.lofSidernews( this, settings ); 
    });
 }


$.lofSidernews = function( obj, settings ){
    this.settings = {
        direction           : '',
        mainItemSelector        : 'li',
                    mainInnerItemSelector   : 'li',
        navInnerSelector    : 'ul',
        navSelector         : 'li' ,
        navigatorEvent      : 'click',
                    subWrapperSelector      :'.lof-main-subwrapper',
        wapperSelector:     '.lof-main-wapper',
        interval        : 4000,
                    innerinterval           :20000,  
        auto                : true, // whether to automatic play   the slideshow
maxItemDisplay      : 5,
        startItem           : 0,
        navPosition         : 'vertical', 
        navigatorHeight     : 100,
        navigatorWidth      : 310,
        duration            : 600,
navItemsSelector    : '.lof-navigator li',
        navOuterSelector    : '.lof-navigator-outer' ,
        isPreloaded         : true,
        easing              : 'easeInOutQuad'
    }   

$.extend( this.settings, settings ||{} );   
    this.nextNo         = null;
    this.previousNo     = null;
    this.maxWidth  = this.settings.mainWidth || 600;
    this.wrapper = $( obj ).find( this.settings.wapperSelector );
            this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
            this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
            this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)

if( !this.wrapper.length || !this.subslides.length ) return ;
if( !this.subwrapper.length || !this.slides.length ) return ;
if( this.settings.maxItemDisplay > this.slides.length ){
        this.settings.maxItemDisplay = this.slides.length;  
}
    this.currentNo      = isNaN(this.settings.startItem)
)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );  
    this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){ 
        this.navigatorInner.width( this.slides.length *   this.settings.navigatorWidth );
        this.navigatorOuter.width( this.settings.maxItemDisplay *   this.settings.navigatorWidth );
        this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
        this.navigatorInner.height( this.slides.length *    this.settings.navigatorHeight );    

        this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
        this.navigatorOuter.width(  this.settings.navigatorWidth );
    }       

this.navigratorStep = this.__getPositionMode( this.settings.navPosition );      
    this.directionMode = this.__getDirectionMode();  
if( this.settings.direction == 'opacity') {
this.subwrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else { 
        this.subwrapper.css
({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) *    this.slides.length } );
    }
    if( this.settings.isPreloaded ) {
        this.preLoadImage( this.onComplete );
    } else {
        this.onComplete();
    }

 }


  $.lofSidernews.fn =  $.lofSidernews.prototype;
 $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;

 $.lofSidernews.fn.extend({


    startUp:function( obj, subwrapper ) {
        seft = this;

        this.navigatorItems.each( function(index, item ){
            $(item).click( function(){
                seft.jumping( index, true );
                seft.setNavActive( index, item );                   
            } );
            $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
        })
        this.registerWheelHandler( this.navigatorOuter, this );
        this.setNavActive(this.currentNo );

        if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
            this.registerButtonsControl( 'click', this.settings.buttons, this );

        }
        if( this.settings.auto ) 
        this.play( this.settings.innerinterval,'next', true );

        return this;
    },
onComplete:function(){
        setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
    },
preLoadImage:function(  callback ){
        var self = this;
        var images = this.subwrapper.find( 'img' );
var count = 0;
        images.each( function(index,image){ 
            if( !image.complete ){                
                image.onload =function(){
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }
                }
                image.onerror =function(){ 
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }   
                }
            }else {
                count++;
                if( count >= images.length ){
                    self.onComplete();
                }   
            }
        } );
    },
    navivationAnimate:function( currentIndex ) { 

        if (currentIndex <= this.settings.startItem 
            || currentIndex - this.settings.startItem >=   this.settings.maxItemDisplay-1) {
                this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                if (this.settings.startItem < 0) this.settings.startItem = 0;
                if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                    this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                }
        }       

任何帮助都将不胜感激

---

谢谢

也许您可以尝试在另一个滑块中添加一个幻灯片放映，以支持更多类似的内容。我曾在项目中使用过它，并有幸在幻灯片中添加了我自己的自定义内容。

尝试将var添加到第238行，它变成：var seft=this

谢谢你的主意，伙计。。。但是你有幻灯片放映的滑块链接吗？