Question

很抱歉提出了一个非常常见的问题，但是我无法找到如何解决这个问题，而且我不知道这个幻灯片是如何工作的。

我希望幻灯片显示在鼠标悬停时暂停并继续鼠标左移。

以下是代码：

$(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>

另外两个js文件在这些链接中你可以看看。

jquery file second jquery file

您可以在页脚部分的webmasteroutlet.com上查看当前版本。它不会在鼠标悬停时暂停。

Answer 1

这是我做的，如果有人想要使用它我改变了滚动元素，它工作得很好

scroll: {
                    items: 1,
                    duration: 1250,
                    timeoutDuration: 2500,
                    easing: 'swing',
                    pauseOnHover: 'immediate'   
                },

Answer 2

您是否尝试过鼠标悬停？

   $("#carousel").mouseover(function() {
  $("#carousel").trigger('pause' ,true);
  });

如何在鼠标悬停时暂停幻灯片放映

2 个答案: