Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 当页面加载时,easySlider幻灯片会短暂地从容器中“弹出”或“闪烁”?_Javascript_Jquery_Slider_Easyslider - Fatal编程技术网

Javascript 当页面加载时,easySlider幻灯片会短暂地从容器中“弹出”或“闪烁”?

Javascript 当页面加载时,easySlider幻灯片会短暂地从容器中“弹出”或“闪烁”?,javascript,jquery,slider,easyslider,Javascript,Jquery,Slider,Easyslider,以下代码是我在网站的generalscript.js文件中的代码。我使用EasySlider作为JavaScript图像滑块,当页面加载时,我注意到其中一个图像幻灯片从图像滑块中弹出,或者以另一种方式描述它,它在屏幕上闪烁,然后返回到滑块。你知道这是什么吗?如果这些信息不足以帮助诊断问题,请告诉我,我将提供更多代码 /* 10. Featured Content Slider */ #prevBtn, #nextBtn, #slider1prev,

以下代码是我在网站的generalscript.js文件中的代码。我使用EasySlider作为JavaScript图像滑块,当页面加载时,我注意到其中一个图像幻灯片从图像滑块中弹出,或者以另一种方式描述它,它在屏幕上闪烁,然后返回到滑块。你知道这是什么吗?如果这些信息不足以帮助诊断问题,请告诉我,我将提供更多代码

            /* 10. Featured Content Slider */
            #prevBtn, #nextBtn, #slider1prev, #slider1next {
                margin: 0;
                padding: 0;
                display: block;
                overflow: hidden;
                /*text-indent: -8000px;*/
            }
            #prevBtn {
                background: url('images/left-arrow.png') no-repeat;
                width: 44px;
                height: 73px;
                    float: left;
                top: 300px;
                z-index: 10000;
            }
            #nextBtn {
                background: url('images/right-arrow.png') no-repeat;
                width: 44px;
                height: 73px;
                float: right;
                top: 100px;
            }
            .left-panel {
                background-color: #000000;
                opacity: .8;
                width: 100%;
                height: 470px;
                z-index: 800;
                position: absolute;
                border-right: 1px solid #000000;
            }
            .right-panel {
                background-color: #000000;
                opacity: .8;
                width: 100%;
                height: 470px;
                z-index: 800;
                position: absolute;
                right: 0;
                border-left: 1px solid #000000;
            }
            #container {
                position: relative;
                width: 100%;
                overflow: hidden;
                background-color: #555555;
            }
            #content {
                position: relative;
                top: 64px;
            }

            #slider {
                padding: 0px 0px 64px 0px;
                display: block;
                height: 100% !important;
                width: 100% !important;
            }
            #slider li {
                position: relative;
                width: 696px;
                height: 241;
                overflow: hidden;
            }
            #slider li img {
                /*position:absolute;*/
                top: 0;
                width: 100%;
                height: 100%;
            }
            #slider li a {
                text-decoration: none;
            }
            #slider ul, #slider li,
            #slider2 ul, #slider2 li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #slider2 {
                margin-top: 1em;
            }
            #slider li, #slider2 li {
                width: 940px;
                height: 400px;
                overflow: hidden;
            }
            #prevBtn, #nextBtn,
            #slider1next, #slider1prev {
                display: block;
                width: 30px;
                height: 77px;
                position: absolute;
                top: 71px;
                z-index: 1000;
            }
            #nextBtn, #slider1next {
                right: 0;
            }
            #prevBtn a, #nextBtn a,
            #slider1next a, #slider1prev a {
                display: block;
                position: relative;
                width: 30px;
                height: 77px;
                background: url(../images/btn_prev.gif) no-repeat 0 0;
            }
            #nextBtn a, #slider1next a {
                background: url(../images/btn_next.gif) no-repeat 0 0;
            }
            ol#controls {
                margin: 1em 0;
                padding: 0;
                height: 28px;
            }
            ol#controls li {
                margin: 0 10px 0 0;
                padding: 0;
                float: left;
                list-style: none;
                height: 28px;
                line-height: 28px;
            }
            ol#controls li a {
                float: left;
                height: 28px;
                line-height: 28px;
                border: 1px solid #ccc;
                background: #DAF3F8;
                color: #555;
                padding: 0 10px;
                text-decoration: none;
            }
            ol#controls li.current a {
                background: #5DC9E1;
                color: #fff;
            }
            ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
                outline: none;
            }
            .featured-content-slider-title {
                font-family: Museo;
                color: #2e2e2e;
                font-size: 20px;
                position: absolute;
                max-width: 830px;
                left: 10px;
                bottom: 65px;
                padding: 6px 10px;
                left: 30px;
                background-color: #FFFFFF;
            }
            .featured-content-slider-author {
                font-family: Museo;
                color: #2e2e2e;
                font-size: 14px;
                position: absolute;
                left: 10px;
                bottom: 30px;
                padding: 6px 10px;
                left: 30px;
                background-color: #FFFFFF;
            }
            .border {
                background: url('images/cta-border-top.png') repeat-x;
                width: 100%;
                height: 24px;
                margin-top: -7px;
                position: absolute;
                z-index: 500;
            }
            <!-- Container -->
            <div id="container">

                <!-- Content -->
                <div id="content">

                    <span class="left-panel"></span>

                    <span class="right-panel"></span>

                    <!-- Slider -->
                    <div id="slider">

                        <!-- Slider List -->
                        <ul>

                            <!-- Slide 1 -->
                            <li>
                                <a href="">
                                    <img src="<?php echo bloginfo('template_url'); ?>/images/slide6.jpg" alt="" />
                                    <p class="featured-content-slider-title">"I want to put a ding in the Universe."</p>
                                    <p class="featured-content-slider-author">By <span class="pink">Steve Jobs</span> / 02.25.1955</p>
                                </a>
                            </li>
                            <!-- /Slide 1 -->

                            <!-- Slide 2 -->
                            <li>
                                <a href="">
                                    <img src="<?php echo bloginfo('template_url'); ?>/images/slide7.jpg" alt="" />
                                    <p class="featured-content-slider-title">"Innotvation distinguishes between a leader and a follower."</p>
                                    <p class="featured-content-slider-author">By <span class="pink">Steve Jobs</span> / 01.09.2007</p>
                                </a>
                            </li>
                            <!-- /Slide 2 -->

                            <!-- Slide 3 -->
                            <li>
                                <a href="">
                                    <img src="<?php echo bloginfo('template_url'); ?>/images/slide8.jpg" alt="" />
                                    <p class="featured-content-slider-title">"It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them."</p>
                                    <p class="featured-content-slider-author">By <span class="pink">Steve Jobs</span> / 09.14.1984</p>
                                </a>
                            </li>   
                            <!-- /Slide 3 -->

                            <!-- Slide 4 -->
                            <li>
                                <a href="">
                                    <img src="<?php echo bloginfo('template_url'); ?>/images/slide1.png" alt="" />
                                    <p class="featured-content-slider-title">"Your time is limited, so don't waste it living in someone else's life."</p>
                                    <p class="featured-content-slider-author">By <span class="pink">Steve Jobs</span> / 03.22.1986</p>
                                </a>
                            </li>
                            <!-- /Slide 4 -->

                            <!-- Slide 5 -->
                            <li>
                                <a href="">
                                    <img src="<?php echo bloginfo('template_url'); ?>/images/slide3.png" alt="" />
                                <p class="featured-content-slider-title">"An iPod, a phone, an internet mobile communicator... these are NOT three separate devices! And we are calling it iPhone! Today Apple is going to reinvent the phone. And here it is."</p>
                                    <p class="featured-content-slider-author">By <span class="pink">Steve Jobs</span> / 10.05.2011</p>
                                </a>
                            </li>
                            <!-- /Slide 5 -->

                        </ul>
                        <!-- /Slider List -->

                    </div>
                    <!-- /Slider -->

                </div>
                <!-- /Content -->

            </div>
            <!-- /Container -->

            <div class="border"></div>

                            //Dynamically center featured content slide
            var image_width = 940;

            $(document).ready(function() {        
                $('#slider').css('padding-left', ($(window).width() - image_width) / 2);
            });

            $(window).resize(function() {
                $('#slider').css('padding-left', ($(window).width() - image_width) / 2);
            });

            // Dyanmically resize featured content slide left and right panels
            jQuery(window).load(function() {

                // Before window loads, resize left and right featured content slider pannels 
                var browser_width = jQuery(window).width();
                var slide_width = 940;
                var panel_width = ((browser_width-slide_width)/2);
                jQuery(".left-panel").width(panel_width);
                jQuery(".right-panel").width(panel_width);

            });

            // Document Ready
            jQuery(document).ready(function () {

                // Blockquote
                jQuery('blockquote').prepend('<div class="quote"></div>');

                // FAQ
                jQuery('.faq-question').click(function () {
                    jQuery(this).next().toggle();
                });

                //Publish Your Work Signup
                jQuery('.writingsample').click(function () {
                    jQuery(this).val("http://");
                });

                //Navigation Search
                // jQuery('.navigation-search').hover(function () {
                //  jQuery('.search-form').fadeIn('slow', function () {
                //      jQuery('input#s').mouseout(function() {
                //          jQuery(this).fadeOut();
                //      });
                //  });
                // });

                jQuery('.navigation-search').click(function () {
                    jQuery('.search-form').toggle();
                });

                // Search Results
                jQuery('#search-results').keyup(function () {
                        var search = jQuery('#search-results').val();
                    jQuery('.search-feedback').html(search);
                });

                //Floating search result sidebar On Other News
                $(function() {
                    var $sidebar   = $('.search-results-sidebar'), 
                        $window    = $(window),
                        offset     = $sidebar.offset(),
                        topPadding = 15;
                    $window.scroll(function() {
                        if ($window.scrollTop() > offset.top) {
                            $sidebar.stop().animate({
                                marginTop: $window.scrollTop() - offset.top + topPadding
                            });
                        } else {
                            $sidebar.stop().animate({
                                marginTop: 0
                            });
                        }
                    });
                });

                // Resize Featured Content Slider
                var TTB = {
                    resize:function() {
                        jQuery(".left-panel").width((jQuery(document).width()-940)/2);
                        jQuery(".left-panel a").width((jQuery(document).width()-940)/2);
                        jQuery(".right-panel").width((jQuery(document).width()-940)/2);
                        jQuery(".right-panel a").width((jQuery(document).width()-940)/2);
                    }
                }

                // Call Resize  
                jQuery(window).resize(function() {
                        TTB.resize();
                });

                // Featured Content Slider (EasySlider)
                jQuery("#slider").easySlider({
                    auto:           true, 
                    continuous:     true,
                    prevId:         'featured-content-slider-left-panel',
                    prevText:       '',
                    nextId:         'featured-content-slider-right-panel',  
                    nextText:       '',
                    controlsShow:   true,
                    controlsBefore: '',
                    controlsAfter:  '', 
                    controlsFade:   true,
                    firstId:        'firstBtn',
                    firstText:      'First',
                    firstShow:      false,
                    lastId:         'lastBtn',  
                    lastText:       'Last',
                    lastShow:       false,              
                    vertical:       false,
                    speed:          3200,
                    pause:          5000,
                    numeric:        false,
                    numericId:      'controls'
              });

            });

一个HTML示例将是伟大的CSS也!因为它让我想起了一个计算滑块宽度时出现的问题,该问题是由于某些浏览器忽略了调整大小的图像,这些图像通过浮点数累积了宽度。在我看到样本之前无法判断。@RokoC.Buljan-请参见上文。我附加了HTML、CSS和JS,实际上我从我的站点发布了完整的JS,以防与滑块相关的其他内容发生冲突。让我知道这是否足够?