移动端基于jquery的旋转木马插件

1.引入插件jquery.carousel.js   (由于这个插件是基于jquery ,所以要先引入jquery.js)

2.html代码如下

<div class="caroursel poster-main" data-setting = '{
                    "scale":0.9, 
                    "algin":"left",
                    "speed":"3000",
                    "isAutoplay":"true",
                    "dealy":"3000"}'>
                    <ul class="poster-list">
                        <li data-id="1" class="poster-item">
                            <img src="../res_im/dong_img.png">
                        </li>
                        <li data-id="2" class="poster-item">
                            <img src="../res_im/xi_img.png">
                        </li>
                        <li data-id="3" class="poster-item">
                            <img src="../res_im/zhong_img.png">
                        </li>
                        <li data-id="4" class="poster-item">
                            <img src="../res_im/bei_img.png">
                        </li>
                        <li data-id="5" class="poster-item">
                            <img src="../res_im/nan_img.png">
                        </li>
                    </ul>
                    <div class="poster-btn poster-prev-btn"></div>
                    <div class="poster-btn poster-next-btn"></div>
                </div>
3,.引入carousel.css
4.在js中初始化
Caroursel.init($('.caroursel'))

posted @ 2019-11-28 15:29  北梦木兮、  阅读(366)  评论(0编辑  收藏  举报