jCarousel 自动滚动的传送切换

jCarousel

http://www.zhangxinxu.com/jq/jcarousel_zh/

jQuery下的滚动切换传送插件

自动滚动的传送切换

内部设定为没2秒钟滚动一次。当鼠标移到图片上或点击“往前”“往后”按钮shit停止自动滚动。wrap设为"last".

 

转载自:http://www.zhangxinxu.com/jq/jcarousel_zh/examples/static_auto.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jcarousel demo</title>
<link rel="stylesheet" type="text/css" href="style/skin.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
    function mycarousel_initCallback(carousel)
    {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
    carousel.startAuto(0);
    });
    carousel.buttonPrev.bind('click', function() {
    carousel.startAuto(0);
    });
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
    carousel.stopAuto();
    }, function() {
    carousel.startAuto();
    });
    }; 
    $(function(){
         $('#static_simple').jcarousel({
            auto: 2,
            wrap: 'last',
            initCallback: mycarousel_initCallback
            });

    });
</script>
</head>

<body>
    <ul id="static_simple" class="jcarousel-skin-tango">
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807110625186.jpg" width="290" height="218" alt="侏罗恐龙" class="vt" />
             </a>
        </li>
    
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807173948155.jpg" width="290" height="218" alt="十二海洋星座" class="vt" /> 
             </a>
        </li>
    
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807174016630.jpg" width="290" height="218" alt="梦想之园系列" class="vt" />
             </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807110625186.jpg" width="290" height="218" alt="侏罗恐龙" class="vt" />
             </a>
        </li>
    
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807173948155.jpg" width="290" height="218" alt="十二海洋星座" class="vt" /> 
             </a>
        </li>
    
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807174016630.jpg" width="290" height="218" alt="梦想之园系列" class="vt" />
             </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807110625186.jpg" width="290" height="218" alt="侏罗恐龙" class="vt" />
             </a>
        </li>
    
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807173948155.jpg" width="290" height="218" alt="十二海洋星座" class="vt" /> 
             </a>
        </li>
    
        <li>
            <a href="#" target="_blank">
                <img src="images/20140807174016630.jpg" width="290" height="218" alt="梦想之园系列" class="vt" />
             </a>
        </li>
    </ul>
</body>
</html>

 

posted @ 2014-08-26 23:49  linyongqin  阅读(241)  评论(0编辑  收藏  举报