Javascript 如何使幻灯片在鼠标悬停
很抱歉问了一个非常常见的问题,但是我找不到如何解决这个问题,我也不知道这个幻灯片是如何工作的 我想让幻灯片在mouseover上暂停,在mouseleave上继续 代码如下:Javascript 如何使幻灯片在鼠标悬停,javascript,jquery,html,slideshow,Javascript,Jquery,Html,Slideshow,很抱歉问了一个非常常见的问题,但是我找不到如何解决这个问题,我也不知道这个幻灯片是如何工作的 我想让幻灯片在mouseover上暂停,在mouseleave上继续 代码如下: $(function() { $('#carousel').carouFredSel({ width: 800, items: 4, scroll: 1, auto: { duration: 1250,
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 4,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager',
});
});`
以及块的html代码:
<!DOCTYPE html>
<html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.dev7studios.com
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." />
<meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" />
<title>Carousel with 3 images centered in rounded corners</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
<script type="text/javascript" src="try.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/carousel_control.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/carousel_control.png) no-repeat -12px -32px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="img/up1.jpg" />
<img src="img/up2.jpg" />
<img src="img/up3.jpg" />
<img src="img/up1.jpg" />
<img src="img/up4.jpg" />
<img src="img/up5.jpg" />
<img src="img/up6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</body>
</html>
旋转木马,以圆角为中心有3个图像
html,正文{
身高:100%;
填充:0;
保证金:0;
}
身体{
背景色:#f0;
最小高度:700px;
}
正文*{
字体系列:Arial、Geneva、SunSans常规、无衬线;
字体大小:14px;
颜色:#333;
线高:22px;
}
#包装纸{
背景色:#fff;
边框:1px实心#ccc;
边界半径:100px;
宽度:800px;
高度:127px;
填充:10px;
利润率:-75px0-410px;
位置:绝对位置;
左:50%;
最高:50%;
}
caroufredsel_先生{
边界半径:90px;
}
#旋转木马{
宽度:201px;
高度:127px;
利润率:0.5px;
浮动:左;
}
#上一个#下一个{
背景:透明url(img/carousel_control.png)不重复0;
文本缩进:-999px;
显示:块;
溢出:隐藏;
宽度:15px;
高度:21px;
位置:绝对位置;
顶部:65px;
}
#上{
背景位置:0;
左:30px;
}
#上一页:悬停{
左:29px;
}
#下一个{
背景位置:-18px 0;
右:30px;
}
#下一步:悬停{
右:29px;
}
#传呼机{
文本对齐:居中;
保证金:0自动;
填充顶部:20px;
}
#寻呼机a{
背景:透明url(img/carousel_control.png)不重复-2px-32px;
文字装饰:无;
文本缩进:-999px;
显示:内联块;
溢出:隐藏;
宽度:8px;
高度:8px;
边距:0 5px 0 0;
}
#寻呼机a已选定{
背景:透明url(img/carousel_control.png)无重复-12px-32px;
文字装饰:下划线;
}
另外两个js文件在这些链接中,您可以查看一下
您可以在webmasteroutlet.com的页脚部分看到当前版本。它不会在鼠标盖上暂停。你在鼠标盖上试过吗
$("#carousel").mouseover(function() {
$("#carousel").trigger('pause' ,true);
});
这里是我所做的,如果有人使用它,我改变了滚动元素,它工作得很好
scroll: {
items: 1,
duration: 1250,
timeoutDuration: 2500,
easing: 'swing',
pauseOnHover: 'immediate'
},
谢谢,但我不知道如何以及在哪里[放置此代码,我根本不理解此幻灯片的结构。