1
我的jQuery的內容滑塊的右鍵似乎被卡在「懸停」。我已經檢查了html,css和圖像路徑 - 一切似乎都應該如此。我的jQuery的技能是不是很不夠好尚未能查明是否有問題那裏 -
HTML
<div id="slider_mask">
<div class="slide_container">
<div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div>
<div class="slide"><p>is the maker + doer for makers + doers</p></div>
<div class="slide">
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ($rss_items as $item) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="left_button"><a href="#" class="left-arrow" title="left arrow"></a></div>
<div class="right_button"><a href="#" class="right-arrow" title="right arrow"></a></div>
</div>
CSS
#home #slider_mask {
width: 420px;
margin: 0 auto;
padding-top: 60px;
position: relative;
overflow: hidden;
}
#home #slider_mask .left_button {
float: left;
display: block;
width: 23px;
height: 25px;
background: url(img/left-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .left_button:hover {
background: url(img/left-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide_container {
float: left;
font-size: 120%;
text-align: center;
width: 420px;
}
#home #slider_mask .right_button {
float: right;
display: block;
width: 23px;
height: 25px;
background: url(img/right-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .right_button {
background: url(img/right-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide {
float: left;
display: block;
text-align: center;
}
jQuery的
jQuery(document).ready(function($){
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.length; // ***CHANGED***
var slide_width = $('#slider_mask').width();
var current_slide = 0;
// ***REMOVED*** slides.not(':first').hide();
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);
slides.width(slide_width); // ***ADDED***
// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {
current_slide++;
if(current_slide == total_slides){ current_slide = 0; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {
current_slide--;
if(current_slide < 0){ current_slide = total_slides-1; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
});
#home #slider_mask .right_button {
background: url(img/right-arrow-hover.png);
background-position: 0 0;
}
到:
這
你能否解釋爲 '粘住懸停' 拿什麼給你? – 2013-03-07 17:26:31