1

我在 wopress 主题中有一个图像滑块，该滑块当前使用内联样式将显示从块更改为无，具体取决于它是哪张幻灯片。有没有办法将它分开，以便它在 js 中动态更改而不是使用内联样式？当它成为当前幻灯片时，它正在更改为显示块。

html:

 <div class="single_fading_slide staged_slide" style="display: none;">
    <div class="positioning load_slide_image">
        <span id="355_img_1">
        <img src="http://imagehere" title="" alt="" width="960" height="340"            class="slide_image">
        </span>
    </div><!-- .positioning .slide_image -->
<div class="slide_overlay"></div>
</div>

脚本：我是 js 新手，因此感谢您的帮助。我确信并非所有这些都适用，但想将其包括在内，以便您可以看到它。

<script type="text/javascript">
/* <![CDATA[ */


jQuery(document).ready(function(){

    // Add class nopreload to all images in 'slide_content' div
    if( jQuery('.slide_content').length>0 ) {
        jQuery('.slide_content').find('img').addClass('nopreload');
    }

            jQuery('#fading_slides').preloader({
            imgAppend: '.load_slide_image',
            fade: false,
            slider: true,
            onDone: function(){
                jQuery('#slider_module .mysite_preloader_large').remove();
                jQuery('.slider_nav').tabs('#fading_slides > div.single_fading_slide', {
                    effect: 'fade',
                    fadeInSpeed: 'fast',
                    rotate: true,
                    onBeforeClick : function(event,index) {
                        if(this.getPanes().eq(index).children().eq(0).find('.vimeo_video').length>0) {
                            var vimeo_video = this.getPanes().eq(index).children().eq(0).find('.vimeo_video').parent().html();
                            this.getPanes().eq(index).children().eq(0).find('.vimeo_video').parent().empty().html(vimeo_video);
                            jQuery('.vimeo_video').each(function(index, vimeo_video){
                                Froogaloop.init([vimeo_video]);
                                vimeo_video.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
                            });
                        }
                        if(this.getPanes().eq(index).children().eq(0).find('.youtube_video').length>0) {
                            var vimeo_video = this.getPanes().eq(index).children().eq(0).find('.youtube_video').parent().html();
                            this.getPanes().eq(index).children().eq(0).find('.youtube_video').parent().empty().html(vimeo_video);
                            jQuery('.youtube_video').each(function(index, youtube_video){
                                onYouTubePlayerAPIReady(youtube_video.id);
                            });
                        }
                        _class = this.getPanes().eq(index).attr('class');
                        jQuery('#slider_module_inner').removeClass();
                        jQuery('#slider_module_inner').addClass( _class.replace('single_fading_slide ', '') );

                        if(this.getPanes().eq(index).children().eq(0).find('.vimeo_video').length>0 && typeof navScript != 'undefined'){
                            setTimeout(function(){
                                jQuery('.slider_nav_thumb .slider_nav').animate({opacity:0},300);
                                jQuery('.slider_nav_thumb .slider_nav').animate({height:'0px'},300);
                              }, 1000 );
                        }
                    },
                    onClick : function(event,index) {}

                }).slideshow({clickable:false, autoplay:true, interval:4000, autopause:true});
                jQuery('#fading_slides').removeClass('noscript');
                jQuery('.slider_nav').removeClass('noscript');
            }
        });


});
/* ]]> */
</script>

非常感谢您的帮助！

4

1 回答 1

0

您可以使用 jQuery.show()来.hide()处理这个问题：

$('#selector').show();
$('#selector').hide();

我强烈建议您花一些时间阅读 jQuery API 文档，我相信您可以大量减少所需的代码量。

于 2013-09-03T20:07:30.310 回答