Jquery滑块插件,一切正常,但图像不会改变

时间:2014-06-28 09:09:18

标签: javascript jquery jquery-ui-slider

新查询和我正在使用这个滑块插件,我已经让它手动工作,但参数设置为'interval:true'和'intervalTime:100',它不会更改图片自动。为什么会这样?

http://jsfiddle.net/3k4Y2/

http://baijs.com/tinycircleslider/

HTML

<title>Tiny Circleslider: A lightweight cross browser circular carousel.</title>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"></script>
    <div id="rotatescroll">
        <div class="viewport">
            <ul class="overview">
                <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr3.jpg" /></a></li>
                <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a></li>
                <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a></li>
                <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a></li>
                    <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a></li>
            </ul>
        </div>

        <div class="dot"></div>
        <div class="overlay"></div>
        <div class="thumb"></div>
    </div>

CSS

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }
#rotatescroll .dot { background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }

Jquery的

$(document).ready(function()
        {
            $('#rotatescroll').tinycircleslider({ interval: true, intervalTime: 100, dotsSnap: true });
        });

0 个答案:

没有答案