使用jquery.yx_rotaion.js制作轮播图效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

jquery.yx_rotaion.js是一款小巧，功能强大，可以自动播放，左右切换按钮，可以设定是否显示标题的一款焦点图插件, 使用jquery.yx_rotaion.js可以轻松制作一个轮播图效果，在这里我介绍一个我工作种经常用到的一个效果。

关键代码与说明

<div class="jqfree">
    <div class="yx-rotaion">
        <ul class="rotaion_list">
            <li><a href="#">
                <img src="images/1.jpg" alt="标题1">
            </a></li>
            <li><a href="#">
                <img src="images/2.jpg" alt="标题2">
            </a></li>
            <li><a href="#">
                <img src="images/1.jpg" alt="标题3">
            </a></li>
            <li><a href="#">
                <img src="images/2.jpg" alt="标题4">
            </a></li>
        </ul>
    </div>
</div> 
<script type="text/javascript">
    $(".yx-rotaion").yx_rotaion({
        /**是否自动播放*/
        auto: true
    });
</script>

参数说明

  • during:3000 /**轮换间隔时间，单位毫秒*/

  • btn:true, /**是否显示左右按钮*/

  • focus:true, /**是否显示焦点按钮*/

  • title:true, /**是否显示标题*/

  • auto:true /**是否自动播放*/