以下代码是我网站的一般scripts.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'
});
});