Question

我在worpress主题中有一个图像滑块，当前正在使用内联样式将显示从块更改为无，具体取决于它是哪个幻灯片。有没有办法将它分开，以便它在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>

非常感谢您的帮助！

Answer 1

您可以使用jQuery的.show()和.hide()来处理此问题：

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

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

动态样式 - 使用JavaScript操作CSS

1 个答案: