以下是我的 Javascript 和 Html 幻灯片代码,它们会自动启动幻灯片。现在,当鼠标悬停在它上面时,我正在尝试启动这张幻灯片。但我不能。有可能还是我该怎么做?
Html 头部 Javascript 代码:
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
Html 正文部分代码:
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="#"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide
1"></a>
</div>
<div class="slide">
<a href="#"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide
2"></a>
</div>
</div>
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>