还要为每个按钮添加一个事件点击。 如果我点击暂停按钮，它应该在暂停和继续之间切换按钮文本，并按照文本一旦继续并暂停一次。
这是我的html代码：
顶部我包括jquery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>
在底部我添加图片：
<div id="wrapper">
<div id="carousel-wrapper">
<img id="shadow" src="img/gui/carousel_shadow.png" />
<div id="carousel">
<span id="pixar"><img src="img/large/pixar.jpg" /></span>
<span id="bugs"><img src="img/large/bugs.jpg" /></span>
<span id="cars"><img src="img/large/cars.jpg" /></span>
<span id="incred"><img src="img/large/incred.jpg" /></span>
<span id="monsters"><img src="img/large/monsters.jpg" /></span>
<span id="nemo"><img src="img/large/nemo.jpg" /></span>
<span id="radar"><img src="img/large/radar002665.png" /></span>
<span id="rat"><img src="img/large/rat.jpg" /></span>
<span id="toystory"><img src="img/large/toystory.jpg" /></span>
<span id="up"><img src="img/large/up.jpg" /></span>
<span id="walle"><img src="img/large/walle.jpg" /></span>
</div>
</div>
最后将javascript代码放在javascript代码的顶部，我设置了如何使其移动（播放）不间断的速度和所有：
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
将鼠标移到任何图像上时，鼠标应显示播放/停止/暂停按钮。