我想要一个包含内容的滑块。但内容应仅在鼠标悬停时出现。这是我正在使用的代码:
<div id="slideshow" style="width:560px; background:#999;">
<div id="slidesContainer">
<div class="slide">
<img src="js/1.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/2.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/3.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/4.jpg" />
<div> some text </div>
</div>
</div>
</div>
和jquery 1.8.3 lib和这段代码
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Hide left arrow control on first load
manageControls(currentPosition);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},2000);
}
setTimeout(Aplay(),20000);
});
现在<div> some text </div>
只应在鼠标悬停时显示,例如:http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4
答案 0 :(得分:1)
一个简单的解决方案是设置这样的'slide'div:
<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
<img src="js/1.jpg" />
<div id="TEXT1" style="display:none;"> some text </div>
</div>
答案 1 :(得分:1)
CSS
<style type="text/css">
.title {visibility:hidden;}
</style>
HTML将类title
添加到所有需要的DIV元素
<div class="title"> some text </div>
将此添加到您的脚本
$('#slideInner').mouseover(function() {
$('#slideInner .title').css('visibility', 'visible');
});
$('#slideInner').mouseout(function() {
$('#slideInner .title').css('visibility', 'hidden');
});
工作jsBin
答案 2 :(得分:1)
这很容易,我认为这是最快的解决方案,因为需要的jquery比其他的少(=保持代码干净)
将以下类添加到包含说明的每个div
:class="slide-desc"
到您的HTML
将var slideDesc = $('.slide-desc');
添加到您的JS中,这只是为了符合您编写jQuery的方式,和 slideDesc.hide();
(或$('.slide-desc').hide;
,以便使用更快的方式)。这个语句(最好在JS的第一行调用.hide()
方法,以避免在加载页面时闪烁描述。在你声明变量之后立即放置。
$('#slidesContainer').hover(function(){ slideDesc.show(); });