0
我在我正在開發的網站上放映幻燈片。它工作正常，除了圖像看起來低於它應該跳起來。 Here is the problem圖像跳躍幻燈片放映
我不知道我在這裏做錯了什麼，有人可以幫我嗎？
function startSlideShow(){
var triggers = $('ul.triggers li');
var preview = $('ul.preview li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
preview.hide().first().show();
function sliderResponse(target) {
preview.fadeOut(600).eq(target).fadeIn(600);
triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
if (!$(this).hasClass('active')) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
function sliderTiming() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },5000);
}
};#content #product_display{
position:relative;
margin-top:40px;
width:100%;
height:747px;
overflow:hidden;
}
#content #product_display img{
position:absolute;
z-index:1;
width:1120px;
height:747px;
}
#content #product_descripton{margin-top:10px;}
#product_control_div{
position:absolute;
z-index:100;
height:40px;
top:747px;
width:calc(1120px - 10px);
padding:5px;
text-align:center;
background:rgba(70,70,70,1.0);
}
#content #product_display:hover > #product_control_div{
top:calc(747px - 50px);
}
#content ul.product_triggers{
display:inline-block;
}
#content ul.product_triggers li {
list-style-type:none;
float:left;
padding:5px;
margin:5px;
margin-top:15px;
cursor:pointer;
background-color:#7b7b7b;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
}
#content ul.product_triggers li.active {
background-color:#ed676b;
}
#content .control {
cursor:pointer;
position:relative;
padding:calc(20px - 2px);
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
border:2px solid #7b7b7b;
}
#content .control:hover {
border:2px solid #ed676b;
}
#content .control:hover > .upper_line,#content .control:hover > .lower_line{
border-bottom: 2px solid #ed676b;
}
#content .control .upper_line{
width: 15px;
height: 30px;
border-bottom: 2px solid #7b7b7b;
-webkit-transform:
translateY(-20px)
translateX(5px)
rotate(45deg);
position: absolute;
}
#content .control .lower_line{
width: 15px;
height: 30px;
border-bottom: 2px solid #7b7b7b;
-webkit-transform:
translateY(20px)
translateX(5px)
rotate(-45deg);
position: absolute;
}
.prev .upper_line{
top:16.5px;
left:15px;
}
.prev .lower_line{
bottom:37px;
left:-6px;
}
.next .upper_line{
top:7px;
left:18px;
}
.next .lower_line{
bottom:27px;
left:-3px;
}
#content .prev { float:left; }
#content .next { float:right; }<div id="content">
<div id="product_display">
<ul class="product_images">
<script>
var count=3;
var title="Cedar Ridge Animal Hospital";
var block = '';
for(var i=1; i<=count; i++){
block += '<li><img src="http://cutthroatdevelopmentllc.com/final/images/full/';
block += title;
block += '/';
block += i;
block += '.jpg" alt="';
block += title;
block += '"></li>';
}
document.write(block);
</script>
</ul>
<div id="product_control_div">
<ul class="product_triggers">
<li></li>
<li></li>
<li></li>
</ul>
<div class="control prev"><div class="upper_line"></div><div class="lower_line"></div></div>
<div class="control next"><div class="upper_line"></div><div class="lower_line"></div></div>
</div>
</div>
<script>startLargeSlideShow();</script>
</div>
