SuperSlide插件轮播的暂停与轮播

近来有这样一个需求, 需要实现SuperSlide轮播的暂停与播放的控制。

难点:

mouseOverStop: false //重点1: (必须设置为false, 否则会干扰到 play 状态的切换)
playStateCell 重点2: 需要模拟hover事件才能增加/删除"pauseState"类名,而且需要解绑单击事件
取消jquery绑定的hover事件的正确方式：

setTimeout(function () {
    selfDOM.unbind('mouseenter').unbind('mouseleave');
 }, 0);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <title>SuperSlide</title>
</head>

<body>
    <style type="text/css">
    /* css 重置 */
    
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    body {
        background: #fff;
        font: normal 12px/22px 宋体;
    }
    
    img {
        border: 0;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    /* 本例子css */
    
    .picScroll-left {
        width: 450px;
        overflow: hidden;
        position: relative;
        border: 1px solid #ccc;
    }
    
    .picScroll-left .hd {
        overflow: hidden;
        height: 30px;
        background: #f4f4f4;
        padding: 0 10px;
    }
    
    .picScroll-left .hd .prev,
    .picScroll-left .hd .next {
        display: block;
        width: 5px;
        height: 9px;
        float: right;
        margin-right: 5px;
        margin-top: 10px;
        overflow: hidden;
        cursor: pointer;
        background: url("images/arrow.png") no-repeat;
    }
    
    .picScroll-left .hd .next {
        background-position: 0 -50px;
    }
    
    .picScroll-left .hd .prevStop {
        background-position: -60px 0;
    }
    
    .picScroll-left .hd .nextStop {
        background-position: -60px -50px;
    }
    
    .picScroll-left .hd ul {
        float: right;
        overflow: hidden;
        zoom: 1;
        margin-top: 10px;
        zoom: 1;
    }
    
    .picScroll-left .hd ul li {
        float: left;
        width: 9px;
        height: 9px;
        overflow: hidden;
        margin-right: 5px;
        text-indent: -999px;
        cursor: pointer;
        background: url("images/icoCircle.gif") 0 -9px no-repeat;
    }
    
    .picScroll-left .hd ul li.on {
        background-position: 0 0;
    }
    
    .picScroll-left .bd {
        padding: 10px;
    }
    
    .picScroll-left .bd ul {
        overflow: hidden;
        zoom: 1;
    }
    
    .picScroll-left .bd ul li {
        margin: 0 8px;
        float: left;
        _display: inline;
        overflow: hidden;
        text-align: center;
    }
    
    .picScroll-left .bd ul li .pic {
        text-align: center;
    }
    
    .picScroll-left .bd ul li .pic img {
        width: 120px;
        height: 90px;
        display: block;
        padding: 2px;
        border: 1px solid #ccc;
    }
    
    .picScroll-left .bd ul li .pic a:hover img {
        border-color: #999;
    }
    
    .picScroll-left .bd ul li .title {
        line-height: 24px;
    }
    </style>
    <div class="picScroll-left">
        <div class="hd">
            <a class="next"></a>
            <ul></ul>
            <a class="prev"></a>
            <span class="pageState"></span>
            <button class="playState">播放</button>
        </div>
        <div class="bd">
            <ul class="picList">
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
                </li>
                <li>
                    <div class="pic">
                        <a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a>
                    </div>
                    <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
                </li>
            </ul>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="./jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript">
    $(function() {
        $(".picScroll-left").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            autoPage: true,
            effect: "left",
            autoPlay: true,
            vis: 3,
            trigger: "click",
            playStateCell: '.playState',
            mouseOverStop: false //重点1: (必须设置为false, 否则会干扰到 play 状态的切换)鼠标移到容器层（无缝滚动是mainCell）是否停止播放
        })
        $('.playState').on('click', function () {
          var self = this
          var selfDOM = $(this)
          
          selfDOM.hover() // 重点2
          
          // 重点3: 要设置为等hover生效后, 才能解绑hover事件
          setTimeout(function () {
            selfDOM.unbind('mouseenter').unbind('mouseleave');
          }, 0);
          if(selfDOM.hasClass('pauseState')) { // 暂停状态
            selfDOM.text('暂停')
          } else { // 播放状态
            selfDOM.text('播放')
          }
        })
    })
    </script>
</body>

</html>

SuperSlide插件轮播的暂停与轮播

无名小子

引用和评论

模拟select弹框