次のコードは、サイトの一般的な scripts.js ファイルにあるものです。EasySlider を JavaScript 画像スライダーとして使用しています。ページが読み込まれると、画像スライドの 1 つが画像スライダーから飛び出すか、別の言い方をすれば、画面上で点滅してからスライダーに戻ります。これが何であるかについてのアイデアはありますか？これが問題を診断するのに十分な情報でない場合はお知らせください。さらにコードを提供します。
/* 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'
});
});