jQuery轮播图淡出淡入切换特效

来源:https://www.sucaihuo.com/js/5093.html 2020-02-10 09:46浏览(614) 收藏

一款简单实用的jQuery轮播图淡出淡入切换特效,默认自动轮播,带左右箭头和索引按钮控制轮播。
jQuery轮播图淡出淡入切换特效
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 14 下载资源 下载积分: 20 积分

js代码

<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
    <script>
        $('.demo').slider({
            imgList: [
                {
                    img: './img/t1.png',
                    a: '#',
                },
                {
                    img: './img/t2.png',
                    a: '#',
                },
                {
                    img: './img/t3.png',
                    a: '#',
                }
            ], //图片的列表
            width: 500, //图片的宽
            height: 300, //图片的高
            isAuto: true, //是否自动轮播
            moveTime: 3000, //运动时间
            direction: 'right', //轮播的方向
            btnWidth: 30, //按钮的宽
            btnHeight: 30, //按钮的高
            spanWidth: 10, //span按钮的宽
            spanHeight: 10, //span按钮的高
            spanColor: '#fff', //span按钮的颜色
            activeSpanColor: 'red', //选中的span颜色
            btnBackgroundColor: 'rgba(0, 0, 0, 0.3)', //两侧按钮的颜色
            spanRadius: '50%', //span按钮的圆角程度
            spanMargin: 3, //span之间的距离
        })
    </script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2