使用kxbdSuperMarquee.js制作图片轮换滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

kxbdSuperMarquee.js 超级Marquee，可做图片导航，图片轮换

可选属性

  • distance:200,//一次滚动的距离

  • duration:20,//缓动效果，单次移动时间，越小速度越快，为0时无缓动效果

  • time:5,//停顿时间，单位为秒

  • direction: 'left',//滚动方向，'left','right','up','down'

  • scrollAmount:1,//步长

  • scrollDelay:20//时长，单位为毫秒

  • isEqual:true,//所有滚动的元素长宽是否相等,true,false

  • loop: 0,//循环滚动次数，0时无限

  • btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID，有四个属性left,right,up,down分别对应四个方向

  • eventGo:'click',//鼠标事件

  • controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID，有四个属性left,right,up,down分别对应四个方向

  • newAmount:4,//加速滚动的步长

  • eventA:'mouseenter',//鼠标事件，加速

  • eventB:'mouseleave',//鼠标事件，原速

  • navId:'#marqueeNav', //导航容器ID，导航DOM

  • eventNav:'click' //导航事件

关键代码

<!DOCTYPE html  >
<html>
<head>
    <title>使用kxbdSuperMarquee.js制作图片轮换滚动效果</title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script src="kxbdSuperMarquee.js" type="text/javascript"></script> 
</head>
<body>
    <div class="jqfree">
        <div class="jqfreeinfo">
            <a href="javascript:void(0);" id="goL" class="go goL"></a>
            <div id="marquee1" class="jqfreeinfo_con">
                <ul style="width: 5500px;">
                    <li><a title="标题">
                        <img src="images/1.jpg" alt="标题"></a> <span><a title="标题">标题</a></span>
                    </li>
                    <li><a title="标题">
                        <img src="images/2.jpg" alt="标题"></a> <span><a title="标题">标题</a></span>
                    </li>
                    <li><a title="标题">
                        <img src="images/3.jpg" alt="标题"></a> <span><a title="标题">标题</a></span>
                    </li>
                    <li><a title="标题">
                        <img src="images/4.jpg" alt="标题"></a> <span><a title="标题">标题</a></span>
                    </li>
                    <li><a title="标题">
                        <img src="images/5.jpg" alt="标题"></a> <span><a title="标题">标题</a></span>
                    </li>
                    <li><a title="标题">
                        <img src="images/1.jpg" alt="标题"></a> <span><a title="标题">标题</a></span>
                    </li>
                </ul>
            </div>
            <a href="javascript:void(0);" id="goR" class="go goR"></a>
        </div>
    </div>
    <script type="text/javascript">
        $('#marquee1').kxbdSuperMarquee({
            distance: 275,
            time: 2,
            btnGo: { left: '#goL', right: '#goR' },
            direction: 'left'
        }); 
    </script>
</body>
</html>