对 jquery.carousel.js 进行修改

最新推荐文章于 2024-07-24 19:56:16 发布

PXTong

最新推荐文章于 2024-07-24 19:56:16 发布

阅读量5.2k

点赞数

分类专栏： JavaScript、jQuery 文章标签：插件 js jq

本文链接：https://blog.csdn.net/pengxiaotongvip/article/details/74202052

版权

本文介绍了作者在使用jquery.carousel.js插件时遇到的问题，以及如何根据个人需求进行定制化修改，包括取消自动轮播功能，添加当前页蒙版和文字显示。

摘要由CSDN通过智能技术生成

在已有的插件 jquery.carousel.js 根据自己的需求进行的修改。
在使用已有的jquery.carousel.js过程中，出现了一些问题，自己进行小小小的修改

如图样式：不自动轮播，当前页面显示蒙版遮罩，文字。

这里写图片描述

html

    <div class="food-carousel">
            <div class = "carourselThree poster-main" data-setting = '{
                "width":1180,
                "height":430,
                "posterWidth":700,
                "posterHeight":430,
                "scale":0.8,
                "isAutoplay":"false", 
                "dealy":"100",
                "algin":"middle"
            }'>
                <ul class = "poster-list">
                    <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
                        <div class="div-text">
                            <h3>营养膳食1</h3>
                            <p>Nutritional Diet</p>
                        </div>
                    </li>
                    <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
                        <div class="div-text">
                            <h3>营养膳食2</h3>
                            <p>Nutritional Diet</p>
                        </div>
                    </li>
                    <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
                        <div class="div-text">
                            <h3>营养膳食3</h3>
                            <p>Nutritional Diet</p>
                        </div>
                    </li>
                    <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
                        <div class="div-text">
                            <h3>营养膳食4</h3>
                            <p>Nutritional Diet</p>
                        </div>
                    </li>
                    <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
                        <div class="div-text">
                            <h3>营养膳食5</h3>
                            <p>Nutritional Diet</p>
                        </div>