Javascript .停下来。鼠标悬停或。悬停
我不知道如何在鼠标悬停或悬停时停止并恢复幻灯片。我基本上希望在触发.mouseover或.hover时停止所有脚本。有人能帮我吗 编辑：如果您只是复制粘贴代码，那么代码应该可以工作，它都是外部托管的Javascript .停下来。鼠标悬停或。悬停,javascript,jquery,Javascript,Jquery,我不知道如何在鼠标悬停或悬停时停止并恢复幻灯片。我基本上希望在触发.mouseover或.hover时停止所有脚本。有人能帮我吗 编辑：如果您只是复制粘贴代码，那么代码应该可以工作，它都是外部托管的 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"><
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4,
items: {
width: $('#wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration: 1000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass('active');
// hide current block
data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass('active');
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find('.slide-block').stop().fadeIn();
}
},
onCreate: function(data) {
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide', this).clone(true),
_width = $('#wrapper').width();
$(this).trigger('insertItem', [newitems, newitems.length, false]);
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass('active');
$('.slide', this).width(_width * 0.15);
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find('.slide-block').hide();
$(this).find('.slide.active .slide-block').stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger('slideTo', [this]);
});
$('.slide:firstchild').mouseover(function() {
$('.slide:firstchild').stop();
});
$('#slider').children().mouseover(function() {
$('#slider').stop();
});
//$('#slider').children().mouseout(function() {
// $('#slider').trigger( 'slideTo', [this] );
//});
// Enable code below if you want to support browser resizing
$(window).resize(function() {
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find('.slide').width(_width * 0.15);
// enlarge first slide
slider.find('.slide.active').width(_width * 0.7);
// update item width config
slider.trigger('configuration', ['items.width', _width * 0.15]);
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 1px;
}
#slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
}
#slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
#donate-spacer {
height: 0;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
color: #999;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="slide">
<img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png">
<div class="slide-block">
<h4>For The Birds</h4>
<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
</div>
</div>
<div class="slide">
<img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png">
<div class="slide-block">
<h4>UP</h4>
<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
</div>
</div>
</body>
</html>
$（函数（）{
$（“#滑块”）.carouFredSel({
宽度：“100%”，
align:false，
项目：4，
项目：{
宽度：$（“#包装”）.width（）*0.15，
身高：500，
可见:1,，
最低限额：1
},
滚动：{
项目：1，
超时持续时间：1000，
onBefore：函数（数据）{
//查找当前和下一张幻灯片
var currentSlide=$（'.slide.active'，this），
nextSlide=data.items.visible，
_宽度=$（“#包装”）.width（）；
//将当前幻灯片调整为小版本
currentSlide.stop（）.animate({
宽度：_宽度*0.15
});
currentSlide.removeClass（“活动”）；
//隐藏当前块
data.items.old.add（data.items.visible）.find（'.slide block'）.stop（）.fadeOut（）；
//将单击的幻灯片设置为大尺寸动画
nextSlide.addClass（“活动”）；
nextSlide.stop（）.animate({
宽度：_宽度*0.7
});
},
onAfter:函数（数据）{
//显示活动滑块
data.items.visible.last（）.find（'.slide block'）.stop（）.fadeIn（）；
}
},
onCreate：函数（数据）{
//克隆图像以便更好地滑动，并将其动态插入滑块
var newitems=$（'.slide'，this.clone（true），
_宽度=$（“#包装”）.width（）；
$（this.trigger（'insertItem'，[newitems，newitems.length，false]）；
//显示图像
$（'.slide'，this.fadeIn（）；
$（'.slide:first child'，this.addClass（'active'）；
$（'.slide'，this）.width（_width*0.15）；
//放大第一张幻灯片
$（'.slide:first child'，此）。设置动画({
宽度：_宽度*0.7
});
//显示第一个标题栏并隐藏其余标题栏
$（this.find（'.slide block'）.hide（）；
$（this.find（'.slide.active.slide block'）.stop（）.fadeIn（）；
}
});
//处理点击事件
$（“#滑块”）.children（）。单击（函数（）{
$（“#slider”）.trigger（'slideTo'，[this]）；
});
$（'.slide:firstchild'）.mouseover（函数（）{
$（'.slide:firstchild'）.stop（）；
});
$（“#滑块”）.children（）.mouseover（函数（）{
$（“#滑块”）.stop（）；
});
//$（“#滑块”）.children（）.mouseout（函数（）{
//$（'#slider'）。触发器（'slideTo'，[this]）；
//});
//如果要支持浏览器大小调整，请启用下面的代码
$（窗口）。调整大小（函数（）{
变量滑块=$（“#滑块”），
_宽度=$（“#包装”）.width（）；
//显示图像
滑块.find（'.slide'）.width（_width*0.15）；
//放大第一张幻灯片
slider.find（'.slide.active'）.width（_width*0.7）；
//更新项目宽度配置
slider.trigger（'configuration'，['items.width'，_width*0.15]）；
});
});
html，正文{
身高：100%；
填充：0；
保证金：0；
}
身体{
背景#f9f9f3；
}
正文*{
字体系列：Arial、Geneva、SunSans常规、无衬线；
字体大小：14px；
颜色：#222；
线高：20px；
}
#包装纸{
身高：100%；
宽度：100%；
最小高度：650px；
最小宽度：900px；
垫面：1px；
}
#滑块{
利润率：100px0；
高度：500px；
溢出：隐藏；
}
#滑动，滑动{
位置：相对位置；
显示：无；
高度：500px；
浮动：左；
背景位置：右中；
光标：指针；
左边框：1px实心#fff；
}
#滑块。滑块：第一个孩子{
边界：无；
}
#slider.slide.active{
游标：默认值；
}
#滑块{
位置：绝对位置；
左：40px；
底部：75px；
显示：内联块；
宽度：435px；
背景色：#fff；
背景色：rgba（255、255、255、0.8）；
填充：20px；
字体大小：14px；
颜色：#134B94；
$('#slider').trigger("stop");
$("#slider").trigger("play",true);
<script>
$(function(){
$("#slider").carouFredSel({
items: 4
});
$("#slider > div.slide").hover(
function(){
$("#slider").trigger("stop");
},
function(){
$("#slider").trigger("play",true);
}
);
});
</script>