jCarousel 自动滚动的传送切换

最新推荐文章于 2024-08-15 08:55:57 发布

bailiang9872

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量118

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/linyongqin/articles/3938485.html

版权

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>

转载于:https://www.cnblogs.com/linyongqin/articles/3938485.html

bailiang9872

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jCarousel 自动滚动的传送切换

jCarouselhttp://www.zhangxinxu.com/jq/jcarousel_zh/jQuery下的滚动切换传送插件自动滚动的传送切换内部设定为没2秒钟滚动一次。当鼠标移到图片上或点击“往前”“往后”按钮shit停止自动滚动。wrap设为"last".转载自：http://www.zhangxinxu.com/jq/jcarousel_zh/e...
复制链接

扫一扫